stylesheet：ブロック要素の上下センタリング

参考：
http://ideahacker.net/2015/02/14/9779/

上下センタリングしたいブロック要素に"position: absolute;"、"top: 0;"、"bottom: 0;"、"margin: auto;"を指定する。上下センタリングしたいブロック要素を内包するブロック要素には"position: relative;"または"position: absolute;"指定する必要がある。
(center-wrapperとcenter-V-block以外のクラス指定は体裁を整えるためのもの）

<div class="center-wrapper outerbox-decoration">
    <div class="center-V-block innerbox-decoration">
        ブロック要素（div要素、skyblueのボックス）に対して<br>
        このブロック要素（div要素、このlightgreenのボックス）を<br>上下センタリング
    </div>
</div>

.center-wrapper{
    position: relative;
}
.center-V-block{
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
}
.innerbox-decoration{
    width: 400px;
    height: 200px;
    background: lightgreen;
}

.outerbox-decoration{
    margin: 0 auto;
    width: 600px;
    height: 300px;
    background: skyblue;
}

サンプル


以上