category:
Technology
Back to Blog Index
CSSでDivを天地左右中央に配置する方法『locate div at the center vertically and horizontally』
ちょっと実装したくなったので、CSSでDivを天地左右中央に配置してみました。
Web creatorsに載っていた方法ですw。
» Web creators (ウェブクリエイターズ) 2007年 03月号
■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にするのがポイントですね。
creamuのドメイントップにindex.htmlを置いていなかったので置きました。天地左右にセンタリングしています☆
» /
クリーンなCSSで天地左右中央にDivを配置、参考にしてみてください☆
スピッツを聞いています。恋は昨日よりも美しい夕暮れ・・。
今日はいろいろ出かけようかな。