2008年01月19日

CSSでDivを天地左右中央に配置する方法

以前、「クライアント領域の中心(中央)に画像を表示する」というエントリーを書いたが、これと似たような方法で「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にするのがポイント


posted by localghost at 17:51| WEB(HTML,CSS,Javascript,DHTMLなど)