CSSだけでサイズの違う画像をdivの上下中央に配置する

CSSだけでサイズの違う画像をdivの上下中央に配置する方法です。
サンプルはこちら。

CSS（IE9まで）

.imgBox {
        margin:5px;
    background:#EEE;
        float:left;
    text-align: center;
    height:130px;
        width:130px;
        vertical-align:middle;      
}
img {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

CSS（IE8以下も対応する場合）

.imgBox {
    /* IE8以下用ハック */
    display: table-cell\9;
    layout-grid-line:130px\9;
        
}
img {
    /* IE8以下用ハック */
    top: 0\9;
    vertical-align: middle\9;
}

サンプルHTML

<div class="imgBox">
    <img src="http://jsrun.it/assets/5/A/n/k/5Ankn.png" width="25">
</div>
<div class="imgBox">
    <img src="http://jsrun.it/assets/5/A/n/k/5Ankn.png" width="50">
</div>
<div class="imgBox">
    <img src="http://jsrun.it/assets/5/A/n/k/5Ankn.png" width="100">
</div>