前の記事 ≪:Wii上で動作するOperaブラウザ用WEBデザインガイド
次の記事 ≫:Ajaxを使ったCAPTCHA認証をPHPで行うサンプル

DIVを垂直方向に中央寄せするCSSサンプル

2006年12月05日-はてなブックマーク

スポンサード リンク
[PR] 英単語を忘却曲線アプリを使って超効率よく記憶する方法

Blue Box Demo: Vertical Centering with a Shiv Div

DIVを垂直方向に中央寄せするCSSサンプル。
次のように、DIV要素をブラウザの縦方向に配置できます。



CSSは非常にシンプルで、まず、html と body 要素に height:100% プロパティを設定します。
次に、body内にdiv要素を配置し、そのdiv要素に対し、height:50% かつ、margin-top:-50px のようにプロパティをあて、
中央寄せしたい要素(上図中、青い部分)の半分のサイズ分のマージンをマイナスします。

最後に中央寄せしたいdiv要素( height:100px ) を配置することで、青い部分は中央によります。
垂直方向に、100px のdiv要素が配置される感じです。

<html>
<head>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}
div#shiv {
background: transparent;
width: 100%;
height: 50%;
margin-top: -50px;
float: left;
}
div#blueBox {
background: blue;
width: 100px;
height: 100px;
clear: both;
position: relative;
top: -50px;
}

/* Hide from IE5mac *//*/
div#shiv {
display: none;
}
html, body {
height: auto;
}
/* end hack */
</style>
</head>
<body>
<div id="shiv"></div>
<div id="blueBox"></div>

</body>
</html>

サンプルではMacIE5用ハックCSSも適用してクロスブラウザ対応。

関連エントリ

関連の記事検索:CSS, Tips, デザイン, Webデザイン, Web制作, HTML
スポンサード リンク

By.KJ : 2006年12月05日 07:08 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)