DIV要素を垂直方向に中央寄せする

カテゴリ:CSSテクニック 2006年12月 6日 08:51

もっとフレキシブルに対応できる垂直中央寄せの記事を新しく書きました。
ブロック要素を内容量に応じて自動で上下左右にセンタリングさせるトリック

DIVを垂直方向に中央寄せするCSSサンプル:PHPSPOT開発日誌

こんな記事を見つけた。
BOX要素を垂直方向に中央寄せするには、テーブルくらいしかできない。
そんな中、CSSでそれを実現してしまおう、というのがこの記事だ。
中を読んでみたけど、わりと強引な感じ。n

HTMLソース

CSSソース

簡単に説明すると、まずhtmlとbody要素にheight:100%を指定。
これでどのブラウザでも画面の縦いっぱいにBOXが展開されます。
そして、その中にDIVをheight:50%で配置。
こうすることで、このDIV要素の下端が画面の中央になります。
また、heightと一緒に上marginに「中央寄せしたいBOX」の高さの半分の値を設定します。n

そしてさらに、そのDIV要素の下にDIVを配置。
そこへ想定している高さを指定し配置することで中央寄せとなります。
つまり、最初のDIVで画面中央までBOXを生成し、
さらに次のDIVの高さの半分だけ上にBOXを押し上げることで
結果的に中央寄せになる、というものですね。
かなり強引な上に、高さの決まったものしか中央寄せできないので
実際に使えるかは未知数ですが…。

てか、なぜBOX要素の垂直方向への中央寄せがないんでしょうかね?
結構必要だと思うのですが…。
次のCSS3に期待しましょうwn

この記事のカテゴリー一覧を見る⇒CSSテクニック

  • このエントリーをはてなブックマークに追加

トラックバックURL

http://css-eblog.com/cgi-bin/mt/mt-tb.cgi/26