サンプル

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

center_middle_by_css.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