pやdiv要素で作るボックスやtable要素で作る表組みなどをセンタリングしたい(＝左右方向で中央に寄せたい)場合は、対象要素のマージン(margin)に「auto」を指定します。すると、その要素はセンタリングされて表示されます。

なぜなら、左右のマージンが自動的に計算された結果、左右に同じ分量の余白が設けられるためです。左右の余白量が同じになれば、結果的にセンタリング(中央寄せ)になるわけですね。

例えば、横幅を300ピクセルにしたボックスをセンタリングするスタイルシートソースは以下のような感じになります。

div.test {
   width: 300px;
   margin: auto;
}

marginプロパティに値「auto」を1つだけ指定すると、左右の余白は自動で決定され、上下の余白はゼロになります。上下の余白をゼロではなく任意の値にしたい場合は、以下のように上下の値を併せて記述すれば良いでしょう。

div.test {
   width: 300px;
   margin: 12px auto;
}

marginプロパティに値を2つ記述した場合は「上下方向の余白」→「左右方向の余白」の順で指定したと解釈されます。したがって上記の場合は、上下の余白が「12ピクセル」になり、左右の余白は自動で決定(＝センタリング)されます。

とまあ、非常に簡単です。

text-alignプロパティを使うわけではないので注意

テキスト(文字)をセンタリングする際には text-alignプロパティに値「center」を指定するので、それと同じ方法でボックスもセンタリングできそうに思えてしまうのですが、そうではありません。この点にご注意下さい。

ボックス(ブロックレベル要素)に対してtext-alignプロパティに値「center」を指定した場合は、ボックスそのものではなく、ボックスの内側に含まれるテキストがセンタリングされることになります。

※以下は余談です。

では、text-alignプロパティでボックスをセンタリング可能だと解説されることがあったのは何故か、というと……

ネット上には古い解説文もそのまま残っていることが多々あります。……と他人事のように言いつつ、当サイトでもそうですが。(^_^;)
で、昔々は「ボックスをセンタリングする際」にも「テキストをセンタリングする方法」と同じ書き方を使っていたことがあります。その時代に書かれた解説を今使ってしまうと、多くのブラウザでは意図した表示になりません。

古いバージョンのIE（IE7以下）だと、marginプロパティにautoを指定しても無視されてしまっていました。

では、その時代にはどうやってボックスをセンタリングしていたのか…というと、text-alignプロパティを使っていました。text-alignプロパティは、文字列の配置(左寄せ・センタリング・右寄せ・両端揃え)を指定するプロパティであって、ボックスの配置には使えません。(ボックスに対してtext-alignプロパティを使うと、ボックスそのものの配置ではなく、ボックス内部のテキストの配置として解釈されます。)

しかし、古いIEではこのtext-alignプロパティを使ってボックスの配置が行えていたのです。ただし、HTML側の修正も必要ですが。参考までに書いておくと、以下のような感じです。

<div class="cover">
   <div class="test">300ピクセルのボックス</div>
</div>

センタリングしたいボックスの外側に、カバー用ボックス(class名に「cover」を指定したdiv要素)を加えています。で、次のようにスタイルシートを書きます。

/* 注：ものすごく古い時代のIE用の書き方 */
div.cover {
   text-align: center;
}
div.test {
   width: 300px;
}

センタリングしたいdiv要素(class=”test”)の外側に、さらにdiv要素(class=”cover”)を記述しています。そして、そのdiv要素(class=”cover”)に対してtext-alignプロパティに値「center」を指定しています。
すると、古いIEではdiv要素(class=”cover”)内に含まれるあらゆるものをセンタリングするので、ブロックレベル要素であるdiv要素(class=”test”)そのものもセンタリングされたのです。

しかしながら、上記のように書いてしまうと、古いIEではたしかにボックスがセンタリングされますが、モダンブラウザで表示させた場合には(ボックス自体はセンタリングされず)ボックス内部の文字列だけがセンタリングされてしまうという問題が起こります。それがスタイルシートの正しい解釈なので当然ですが。

そこで、それらをすべて解決するために、以下のようなスタイルシートソースが紹介されていたこともありました。

div.cover {
   text-align: center; /* (A)古いIE向け */
}
div.test {
   width: 300px;
   margin: auto; /* (B)モダンブラウザ向け */
   text-align: left; /* (C)古いIE向け記述の後処理 */
}

古いIE向け記述(A)を使うと、モダンブラウザではボックス内部の「テキスト(文字列)」がセンタリングされます。
そこで、その記述を無効化するために、「(C)古いIE向け記述の後処理」を追記します。これは、センタリング指定されてしまっているテキストを左寄せに戻す記述です。

このように記述すれば、「古いIE」と「モダンブラウザ」の両方でボックスをうまくセンタリングできます。

※ここではセンタリングされるボックスの横幅を「300px」としていますが、古いIEではこの「300px」に内側の余白(padding)も含まれます。したがって、上記のソースでも「古いIE」と「モダンブラウザ」とで同じ表示にはなりません。どうしても古いIEでの表示をサポートしたければ、CSS3でボックスのサイズの解釈方法を指定するbox-sizingプロパティを使って、「box-sizing: border-box;」のように加えておく手もあります。

しかしまあ、今さら上記のような面倒で長い記述を使う意味はないでしょう。
ボックスをセンタリングする際には、冒頭でご紹介した「marginにautoを指定する」というシンプルな記述だけを書いておけば良いと思います。

(更新日：2016年01月13日)