CSSこぼれ話:ボックス上下中央寄せ

2007.03.23 Author: たく

CSSレイアウトにおいてボックスを常に中央寄せ表示をさせるには、ボックスの左右のmarginをautoにすれば可能ですが、上下中央寄せをさせるのは通常困難です。
しかし、CSSレイアウトでそれを可能にするのが以下のソースコードです。

HTML

<div id=box>左右上下に中央寄せしたいボックス</div>

CSS

body {

background-color: #cccccc;
margin: 0px;
padding: 0px;
}

#box {
position: absolute;
width: 500px;
height:190px;
left: 50%;
top: 50%;
margin-left: -250px;
margin-top: -95px;
background-color: #ffffff;
}

ブラウザの50%の位置にボックスの左肩が来るように配置し、そこからボックスの幅と高さの半分だけ上に移動させるというものでした。サンプル