http://ideahacker.net/2015/02/14/9779/
ブロック要素の上下センタリングに"left: 0;"と"right: 0;"を追加する。
(center-wrapperとcenter-HV-block以外のクラス指定は体裁を整えるためのもの)
<div class="center-wrapper outerbox-decoration">
<div class="center-HV-block innerbox-decoration">
<span>ブロック要素(div要素、このskyblueのボックス)を<br>上下左右センタリング</span>
</div>
</div
.center-wrapper{
position: relative;
}
.center-HV-block{
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
}
.outerbox-decoration{
margin: 0 auto;
width: 600px;
height: 300px;
background: skyblue;
}
.innerbox-decoration{
width: 400px;
height: 200px;
background: lightgreen;
}
サンプル
サンプル(ウインドウに対して上下左右センタリング)
以上
