上下の中央揃え

下記の ふたつのコードは、200ピクセルの高さを持つ枠内で、「ドラえもん」という文字が それぞれ上下中央揃えになります。

<table width="300" height="200" border="1">

	<tr>

		<td valign="middle">

			<p>ドラえもん</p>

		</td>

	</tr>

</table>
<div id="Dramichan">

	<div class="Doraemon">

		<p>ドラえもん</p>

	</div>

</div>

どちらも こんな感じ↓で表示されます。（罫線の種類は異なりますが。）

ドラえもん

CSSマークアップによる舞台裏は、これです。枠内の文章が増えても中央揃えになります。また、テーブル扱いにしているので、文章量が高さ200ピクセルを超えれば枠が縦に伸びます。（IE6はテーブルでなくても伸びます。）

#Dramichan {

	display		: table;

	width		: 300px;

	height		: 200px;

	border		: solid 1px #000000;

}

.Doraemon {

	display		: table-cell;

	vertical-align	: middle;

}

下記は、IE用に追記するやつです。

* html #Dramichan {

	position	: relative;

}

* html .Doraemon {

	position	: absolute;

	top		: 50%;

}

	* html .Doraemon p {

		position: relative;

		top	: -50%;

	}

つまり、IEを想定するとブロックが3重構造に。できるだけdivを使いたくないのですが、div ＞ div ＞ div と組めば、中身はpなどで柔軟に組めますね。IE6のシェアって、今どれくらいなんでしょう。