CSSでボックス要素を画面中央に表示させてみる

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

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

サンプル

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

center_middle_by_css.html

仕組みとミソ

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

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

動作確認ブラウザ

現時点でCSSのみではInternet Fucking Explorer 6を克服できていません。。min-widthmin-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

“CSSでボックス要素を画面中央に表示させてみる” への 2 件のフィードバック

  1. こちらのサイト、いつも大変お世話になっております。
    こちらのページのサンプルを参考にコーディングさせて頂きました。
    ありがとうございます。

    しかし、私のスキルではどうしても実装できなかった事があるのですが、
    以下の様な事は可能なのでしょうか?

    ■ヘッダ■ ← 固定(ブラウザ上部固定)
    ■コンテンツ■ ← 可変画面中央配置(ヘッダ・フッタに重ならない)
    ■フッタ■ ← 固定(ブラウザ下部固定)

    http://www.cssstickyfooter.com/
    stickyfooterなどのソースを参考に自分なりに悪戦苦闘したのですが、
    結局実装する事ができませんでした。。
    ネットで探しても同じ様な事例がなく、納期が迫っている為かなり焦っております。。是非お力をお貸しください。

  2. >moonさん
    お返事遅くなってごめんなさい。
    お役に立てて光栄です、ありがとうございます。

    さて、お困りの件ですが、可能か不可能かであれば「可能」であると思います。ただし、CSSのみですべてのブラウザに対して実装できるかはわかりません。
    たとえば、コンテンツがヘッダフッタに重ならないのが条件に挙げられていますが、仮にウィンドウの縦幅が(ヘッダ+コンテンツ+フッタ)の高さより小さい場合はスクロールバーが表示されればよい、ということでしょうか。そうすると(特にIE向けでは)CSSのみの実装はかなり難しくなると考えられます。

    検証などはしていませんが、JavaScriptを使う方法が妥当のような気がします。そちらの線でお調べになってはいかがでしょうか。
    あまりお役に立てずもうしわけないです;-(

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA