[CSS]上部のエリアを確保しつつ、要素をページの中央に配置するスタイルシート

ページ上部のエリアをキープしつつ、div要素をページの垂直方向の真ん中に表示するスタイルシートをIn the Woodsから紹介します。

Vertical Centering With CSS
demo 5 （IE 8rc1）

上記のデモでは、オレンジ色のdiv要素を垂直方向の真ん中に表示し、スクロールバーが表示されるくらいにウインドウのサイズを小さくしても、上部のタイトルの表示エリアを確保します。

垂直方向の真ん中に表示させる方法としては、「display:table;」を使用したり、要素の半分の高さをマイナスマージンにしたりなど、いくつかの手法があります。

demo 4 （Safari 3）

これらの良い点を踏襲し、上部のエリアをキープしつつ、要素を垂直方向の真ん中に表示させるスタイルシートを考えたとのことです。

下記は、それを簡略化したものです。

簡略化したデモ（Fx 3）

仕組みは、上部の要素と中央の要素の間に空divを配置するもので、空divには中央の要素の半分の高さのマイナスマージンを指定します。

既知の問題点として、IE6ではスペースが広くなります。

簡略化したデモのキャプチャ（IE 6）