CSSの最近のブログ記事

CSSで中央配置まとめ。

■左右中央

中央寄せしたいブロック要素にmargin:0 auto;を適用。
でよいはずなのですがIE6ではバグで中央にならないのでCSSハック。text-align:centerを適用したdivで囲みます。中央寄せしたブロック内のテキストも中央揃えになるので、text-align:leftで元通り。
IE6のシェアがそこそこあるうちはこれが正解のようです。

<div class="hakku">
	<div class="mannnaka"> hogehoge </div>
</div>

div.hakku{
	text-align:center;
}

div.mannnaka{
	margin:0 auto;
	text-align:left;
}

■上下中央

position:absoluteでも実現可能ですが、heightが指定されていることが前提だったりするので、ここではheightに依存しない方法。
通常ではvertical-alignは適用されないブロック要素を、テーブル要素もしくはインライン要素とすることにより適用させます。IE6,IE7用にCSSハックが必要です。

<div class="kakomi">
	<div> hogahoga </div>
</div>

div.kakomi div{
display:table-cell;
width:100px;
margin-bottom:1px;
vertical-align:middle;
}

* html div.kakomi div{/* IE 6 */
display:inline;
zoom:1;
}

*:first-child+html div.kakomi div{/* IE 7 */
display:inline;
zoom:1;
}

こちらで詳しく解説されています。
CSS で簡単に上下中央揃えを実現する | ヨモツネット