DIVを垂直方向に中央寄せするCSSサンプル:phpspot開発日誌

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

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

2006年12月05日-

スポンサードリンク

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>