Category
タグ一覧
縦横 ページの中央に配置
2007年9月 5日 16:03
CSSレイアウト時にボックスを左右中央揃えで配置するには、ボックスの左右のマージンをautoにすればいいのですが、天地（縦）中央揃えで配置する時の方法。
ネガティブマージンを利用した中央配置です。
ブラウザの中央（50%）にコンテンツ（div）の左上がくるように配置されるので、そこからコンテンツの幅、高さの分だけ左上（負の値）にmarginで移動。
コンテンツの幅、高さが固定の時しか利用できません。幅が可変の時はボックスの左右のマージンをautoなどを組み合わせれば上手くいくかも。
<html> <body> <div>あああ</div> </body> </html>
html,
body{
height:100%;
width:100%;
position:relative;
}
div {
position:relative;
top:50%;
left:50%;
width:50px;
height:50px;
background:#555;
margin:-25px 0 0 -25px;
}