CSSでboxをブラウザ中央に配置する
cssとかxhtmlとか、マークアップのお手本やTipsを見つけたら、メモ代わりにここに書いていこうと思っています。とりあえず今日のメモ。
cssで、ボックスをブラウザの左右中央に表示することは簡単で、そのボックスの左右marginをautoに設定すればOKなのだけど、上下中央となると話が違って、上下のmarginをautoにしたところで実現できないんですよね。で、それのやり方を知ったのでメモしておきます。
///html
<div id="box">
<p>このBOXはCSSのみでブラウザの中央に配置されています。</p>
<p>リサイズしてもちゃんと追従して中央になります。</p>
</div>
///css
#box{
position:absolute;
width:500px;
height:200px;
top:50%;
left:50%;
margin-left:-250px;
margin-top:-100px;
}
cssで中央に配置したいボックスに上記のように設定します。どうなっているかというと、
- 絶対配置を使い、ブラウザ中央にボックスの左上角をレイアウト
- そこから、ボックスの幅の半分をmargin-leftに、ボックスの高さの半分をmargin-topに「-」（負）で設定
これで中央に配置されます。前にもどこかで読んだような気もするテクニックだけど、きちんと覚えておこうかなと思いました。
