以前、「クライアント領域の中心(中央)に画像を表示する」というエントリーを書いたが、これと似たような方法で「CSSでDivを天地左右中央に配置する」という記事があったので引用して紹介。
■CSS
<style type="text/css">
body {
background:#ccc;
margin:0;
padding:0;
}
#wrap {
position:absolute;
width:500px;
height:100px;
left:50%;
top:50%;
margin-left:-250px;
margin-top:-50px;
background:#fff;
color:#999;
}
</style>■HTML
<body>
<div id="wrap">locate div at the center vertically and horizontally.</div>
</body>■以下がポイント
width:500px;
height:100px;
margin-left:-250px;(widthの1/2)
margin-top:-50px;(heightの1/2)マイナスで半分のpxにするのがポイント