縦の中央配置

スタイルシートで縦の中央配置をどうやるのか……。そんな記事をだいぶ前に書いた。
しかし、その時紹介した方法は事前に高さが分かっていないと使えないものだった。
今回紹介する方法は、事前に高さが分かっていなくても縦の中央配置が可能というものである。

<style type="text/css">
	div.va
	{
		position:absolute; top:50%; left:50%;
	}
	div.vai1
	{
		position:absolute; top:-50%; left:-50%;
		text-align:center;
	}
	div.vai2
	{
		visibility:hidden;
	}
</style> 

このソースをヘッダに記述し

<div class="va">
	<div class="vai1">
                《内容》
	</div>
	<div class="vai2">
                《内容》
	</div>
</div>

と書けば中央配置される。（《内容》はどちらも同じにしておく）
《内容》はブロックだろうとインラインだろうとＯＫだ。
表示テストはIEとFireFoxで行った。

BODYの下に書けばページの中央に表示されるが、「positionにstatic以外を指定したdivタグ」の下に書けばその要素の上下中央に表示される。