CSSでDivを天地左右中央に配置する方法『locate div at the center vertically and horizontally』 | CREAMU
http://blog.creamu.com/mt/2007/07/cssdivlocate_div_at_the_center.html
ミニマルモデルで示すと、
<html>
<body>
<div
style="
position: absolute;
top: 50%;
left: 50%;
margin-left: -200px;
margin-top: -100px;
width: 400px;
height: 200px;
border: 1px solid black;
"
>
aaaa
</div>
</body>
</html>
こういうことなんだけど、これって
「ウインドウサイズが天地左右中央にしたいボックスより小さいと、
そのボックスの上辺・左辺が消えてしまう」
よね。
具体的に
http://blog.creamu.com/
で示すと（XP+IE7使用。Firefox系も同じ）、ウインドウサイズが十分に大きい場合は
となって期待通りだが、小さくしてみると
といったように上辺・左辺が欠ける。というか四辺全部が欠けるということなんだけどね。
欠けるのが下辺・右辺だけならいいのだが、上辺・右辺が欠けると
・違和感がある
・ナビゲーションバーなど上辺・右辺に配することが多いパーツが消える
という問題点がある。特に後者が致命的。
「こまけーこといってんじゃねーよ。
こんなウインドウサイズにして見るヤツいねーよぼけー」
とか言う？ いや、そうじゃなくて…天地左右中央にボックスを配置したいのって、
「描画領域をXGA（1024×768ドット）決め打ちで作っているサイトを
SXGA・WXGAディスプレイで見たとき、
描画領域を中央にもってくることでつじつまを合わせたい」
場合が多いじゃない？ そういうケースで描画領域がスクロールバーなどの分量を計算に入れていないとき、XGAディスプレイでフルスクリーン表示しても上辺・左辺が欠けてしまうんだよね。
おまけに、スクリーンショットを見てもわかるように、上辺・左辺に向かって消えてしまった領域はスクロールバーの操作で呼び出すこともできないので、万一VGA環境なんかで見たら死ぬほど悲惨なことになる。
ということなので、この手法は使う場所を考えないといけないと思う。
めんどくさいねー。もっと簡単に天地中央にしたいよねー。…はっ！ いま、誰もが納得するうえにインターオペラビリティ豊かな解決策を思いついたよ！！ それはtabl（以下Web標準原理主義者による検閲で削除）
