[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)

sponsors

top of page

©2018 coliss