CSS で画面中央表示のサンプル

少し前に出た話題だけど、CSS (だけ) でブラウザのウィンドウの中央にボックスを表示させてみる。元ネタは以下の記事より。

CSSでDivを天地左右中央に配置する方法『locate div at the center vertically and horizontally』 | CREAMU

サンプル

以下のリンク先にサンプルがあります。

sample.html

仕組みとミソ

元記事のように、ネガティブマージンを使用すると、中央配置したボックスの大きさよりブラウザのウィンドウが小さくなると、右上半分が消えてしまいます。 また position: static; な body 要素に絶対配置すると、ブラウザのウィンドウを小さくしていくとうまいこといかない (画面の中央に表示されない) 現象がみられました。ということで今回は以下のように対策してみました。

• 高さ 100% の body 要素に position: relative; を指定する。
• ボックスの縦横を min-width、min-height を指定して、それ以下になったらスクロールさせる。
• あとはこれまで通り、50% のところに配置してネガティブマージンでボックスの半分戻す。

動作確認ブラウザ

現時点で CSS のみでは Internet Fucking Explorer 6 を克服できていません。。 min-width、min-height を実現する JavaScript を使えばできるけど、今回はそれが目的でないので割愛。

• Windows
  • Firefox 2
  • Opera 9
  • Safari 3 for Windows Beta
  • IE 7
• Mac
  • Firefox 2
  • Opera 9
  • Safari 2

何かよい方法はないでしょうかね。

HTML コード

<div class="centerMiddle">
  <p>ブラウザの画面サイズがボックスのサイズ(600×400)より小さくなってもスクロール可能になります。</p>
</div>

CSS コード

html, body {height: 100%;}  /*高さ100%に指定*/
body {
  margin: 0;
  padding: 0;
  position: relative;
  min-width: 600px;  /*中央配置するボックスの横幅*/
  min-height: 400px;  /*中央配置するボックス縦幅*/
  background-color: #2262aa;
}
.centerMiddle {
  margin: -200px 0 0 -300px;  /*縦横の半分をネガティブマージンでずらす*/
  position: absolute;  /*body要素に対して絶対配置*/
  top: 50%;  /*上端を中央に*/
  left: 50%;  /*左端を中央に*/
  width: 600px;  /*横幅*/
  height: 400px;  /*縦幅*/
  background-color: #fff;
}

別のアプローチ

今回は、ネガティブマージンを指定した際の問題を克服するように考えてみたけど、以下で紹介されている方法と margin: 0 auto; を使えばおそらく中央配置できると思います。(試してないけど)

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

この手法では中央配置したいボックスの上に余分な (空) div を用意する点が気になります。例えば、この中に適当にロゴとか置いて、ブラウザの画面左上に絶対配置してみたりすれば空 div が気になる人も心が落ち着くかもしれません;-p

サンプルのインデックスに戻る