2016-04-17

stylesheet:ブロック要素の上下左右センタリング

参考:
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;
}

サンプル
サンプル(ウインドウに対して上下左右センタリング)


以上