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

だるかぶ

サンダルでスーパーカブ乗りの『だるかぶ』です！
ご訪問ありがとうございます。ゆっくりしていってね。（本ページは広告を含みます。）

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

サンプル

CSS ソース

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

HTML ソース

<div>container</div>

サンプルファイル

https://codepen.io/darucub/pen/PwNwvbo

表示確認したブラウザ

• 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 を使う方法もあるみたい。

現場からは以上です。それでは、またッ！！！

だるかぶ

最後までお読みいただきありがとうございます！ スキ・コメント・シェア・フォローなどで応援いただけると『だるかぶ』のやる気がアップします！

記事内容の修正について 記載している内容は記事執筆時の情報です。 できるだけ最新情報を掲載するようにしていますが、情報が間違っている場合は「コメント」でご指摘いただけるとありがたいです。