W3G

table-cell + vertical-align : middle ; による上下中央揃え

ul {
	display : table ;
	border : 1px solid #aaa ;
}
ul li {
	display : table-cell ;
	vertical-align : middle ;
	width : 100px ;
 }
.box1 {
	background-color : #ffc ;
}
.box2 {
	background-color : #fcf ;
}
.box3 {
	background-color : #cff ;
}

必要な指定は、上下中央揃えにしたいボックスの親要素にdisplay : table ;を指定すること、上下中央揃えにしたい横並びになるボックスにはdisplay : table-cell ;とvertical-align : middle ;を指定することです。ボックスを横並びにするのにfloatの指定は不要です。

これだけでFirefoxやOpera、Safariではボックス内容の上下中央揃えが可能になります。

IE6, 7用のハックを加える

ul {
	display : block ;
	border : 1px solid #aaa ;
}
html:lang(ja) ul {
	display : table ;
}
ul li {
	vertical-align : middle ;
	width : 100px ;
	display : inline ;
	zoom : 1 ;
}
html:lang(ja) ul li {
	display : table-cell ;
 }
.box1 {
	background-color : #ffc ;
}
.box2 {
	background-color : #fcf ;
}
.box3 {
	background-color : #cff ;
}

まず、IE6, 7には、すべての要素に独自のhasLayoutプロパティというものが付与されています。このhasLayoutプロパティにはtrueかfalseの真偽値が与えられており、通常はfalseなのですが、ある特定のCSSプロパティの値と組み合わせられた要素についてはhasLayoutプロパティの値がtrueへと切り替わる仕組みになっています。

そして、hasLayout="true"になると、IE6, 7ではその要素は他の要素に影響されない独自のレイアウトをもつ不思議な振る舞いをするようになります。このhasLayout="true"にするための指定がzoom : 1 ;の指定です。zoomプロパティはIE独自のプロパティのため、他のブラウザでは無視されることになるので気にする必要はありません。あくまでもhasLayout="true"にするためだけのものです。表示が崩れているときなどもhasLayout="true"にすると改善される場合があります。

このIE6, 7の独自の振る舞いを逆手に利用することで、IE6, 7においてはvertical-alignプロパティが有効であるインライン要素（display : inline ;）でありながら、widthで指定された値も有効になる不思議なボックスを形成できます。結果、table-cellと同様の振る舞いが可能になります（ただし、高さは指定できないため横並びの背景領域まで揃えることはできません）。

なお、セレクタの前に:lang擬似クラスとして:lang(ja)を用いているのは、IE6, 7用のハックの指定をFirefox, Opera, Safariで上書きするための指定です。もし言語が日本語ではなく英語の文書であれば、:lang(en)に変更して用いる必要があります。

サンプル

追記

2009年3月20日にリリースされたIE8もdisplay : table ;やdisplay : table-cell ;に対応しています（IE8からはhasLayoutプロパティが削除されました）。これによりInternet Explorerにおいても8以降であれば、display : table-cell ;+vertical-align : middle ;の方法で上下中央揃えが可能です。ただし、IE6, 7のシェアが残る間は、まだ当分このようなハックを併用する必要があるでしょう。