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; }
サンプル
サンプル(ウインドウに対して上下左右センタリング)
以上