[ CSS ] 画面の中央にブロック要素を配置するサンプル

よく使う水平方向の中央に表示じゃなくて、水平・垂直方向の中央にブロック要素を配置する CSS サンプルを書いてみました。 ↓ こんなの。

サンプル

CSS ソース

#container {
    position: absolute;
    top: 50%;
    left: 50%;
    overflow: auto;
    width: 400px;
    height: 300px;
    margin-top: -150px;  /* ボックス高の半分を指定 */
    margin-left: -200px; /* ボックス幅の半分を指定 */
}

HTML ソース

<div id="container">container</div>

サンプルファイル

• 水平・垂直方向の中央にブロック要素を配置する CSS のサンプル

表示確認したブラウザ

• OK – Mac Safari 2.0
• OK – Mac Firefox 2.0
• OK – Windows Internet Explorer 5.5 to 7
• OK – Windows Firefox 2.0

表示の不具合があったので修正した @ 2007/09/07

ウェブブラウザのウインドウを小さくすると内容物が表示されない問題で困ってたんですが、ボックスを上下左右画面中央に｜CSS HappyLife と言う解決法っぽい記事を見つけたので CSS を修正してみました。情報ありがとうございます。

• 水平・垂直方向の中央にブロック要素を配置する CSS のサンプル ( 修正版 )

これで良いのかな？ IE6 は未対応っぽい。それから、JavaScript を使う方法もあるみたい。