search :

archive :



« 無料で使えるフォント配布サイト『urbanfonts』 | トップ | Webサービスをマップにしたトレンドマップ『Web Trend Map 2007/V2』 »

CSS センタリング 天地中央

_CSS | July 21, 2007, 11:07
はてなブックマーク

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を置いていなかったので置きました。天地左右にセンタリングしています☆

» http://blog.creamu.com/

クリーンなCSSで天地左右中央にDivを配置、参考にしてみてください☆

Editor's Note

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

Trackback URL :

プロフィール

プロフィール

WEB制作・ブランディングを主軸とした、株式会社クリーム代表取締役。

案件につきましては、「お問い合わせページ」からお気軽にご相談ください。

Recommend

  • Josef Muller-Brockmann: Pioneer of Swiss Graphic Design
  • Who Owns The Water?
  • Helvetica: Homage to a Typeface
  • Corporate Diversity: Swiss Graphic Design and Advertising by Geigy, 1940-1970
  • Typography (Graphic Design in Context)
  • +81 voyage or Tokyo Graphic passport World Tour---At Center Pompidou in Paris and 3331 Tokyo
  • WONDERWALL ARCHIVES 01

archive :