【CSS】ブロック要素を中央配置にしたい

CSSを使ってブロック要素を中央に配置したいときは、
中央配置したいブロックの幅をwidthで決めた後、左右のmarginをautoにします。
上下のmarginの値は任意でかまいません。

margin	要素に対して外側の余白を指定するプロパティです。

HTML

<div id="center">
	中央配置したいブロック
</div>

CSS

#center {
	width: 500px;
	margin: 0 auto;
}

IEの場合

IE6など古いバージョンのIEの場合、上の方法だと中央配置が適用されません。
その場合は、中央配置したいブロックの上の要素のtext-alignを中央にすることで
対応することができます。

text-align	要素内の行揃えの位置を指定するプロパティです。

HTML

<div id="block">
	<div id="center">
　		中央配置したいブロック
	</div>
</div>

CSS

#block {
	text-align: center; /* IE6対応用 */
}
#center {
	width: 500px;
	margin: 0 auto; /* IE以外のブラウザ用 */
	text-align: left; /* 行揃えを左に戻す */
}

上の要素（#block）で指定した中央行揃えは、下の要素（#center）にも引き継がれるので
中央配置させたブロック（#center）で text-align: left;と指定して
行揃えを左に戻すことを忘れないようにしましょう。

上の例では中央配置したいブロックをブロックで更に囲って対応しましたが、
bodyに直接 text-align: center; を指定することも可能です。