ブラウザの中央にボックス配置
ボックスタイプのコンテンツを常にブラウザ画面中央に表示させたい、そんなときに使えるCSS。
サンプルはコチラ
ベースとなるhtmlは以下の通り。
ポイントは、ボックスの高さと横幅の半分の値をネガティブマージンで指定すること。
これでユーザーがウインドウのサイズを変更しても、常に画面中央に表示できる。
ベースとなるhtmlは以下の通り。
<body>
<div id="contents">
<img src="images/sample.jpg" width="340" height="240" alt="" />
</div>
</body>
cssはこれ↓
#contents{
position:absolute;
top:50%;
left:50%;
width:340px;
height:240px;
margin-top:-120px;
margin-left:-170px;
}
ポイントは、ボックスの高さと横幅の半分の値をネガティブマージンで指定すること。
これでユーザーがウインドウのサイズを変更しても、常に画面中央に表示できる。
コメントする