DiaryTechnology

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

By 7月 21st, 2007 No Comments

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を置いていなかったので置きました。天地左右にセンタリングしています☆
» https://blog.creamu.com/
クリーンなCSSで天地左右中央にDivを配置、参考にしてみてください☆


スピッツを聞いています。恋は昨日よりも美しい夕暮れ・・。
今日はいろいろ出かけようかな。

Kunitaka Kawashimo

Kunitaka Kawashimo

アートディレクター・デザイナー・フォトグラファー。株式会社クリーム代表取締役。グラフィックデザイン/Webデザイン/撮影の仕事のご相談・ご質問は、お気軽に以下までご連絡ください。info@creamu.co.jp

Leave a Reply