stylesheet：インライン要素の上下左右センタリング

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

インライン要素の左右センタリング＋上下センタリングを組み合わせる。
(outerbox-decorationのクラス指定は体裁を整えるためのもの）

<div class="center-HV-inline outerbox-decoration">
    <span>
        skyblueのブロック要素（div要素）の中で<br/>インライン要素（img要素）を上下左右センタリング
    </span><br/>
    <img src="image_s.jpg">
</div>

.center-HV-inline{
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}
.outerbox-decoration{
    margin: 0 auto;
    width: 600px;
    height: 300px;
    background: skyblue;
}

サンプル
サンプル（ウインドウに対して上下左右センタリング）
サンプル（応用レイアウト）


以上