html - 小さいコンテナで画像を垂直に揃える

Question

100pxx100pxのコンテナがあります。幅を100pxに設定した以外は、寸法がわからない画像を入れました。CSSで、この画像をコンテナの中央に垂直に配置する方法を見つけたいと思います。私はオーバーフローをスタックしました：それが正方形の外に何かを表示するのを防ぐためにコンテナに隠されています。

私はここで反対の方法（高さではなく幅）について何かを見つけました。

Answer 1

HTMLテーブルを模倣する2つのdiv内に画像をラップします。外側のdivにはdisplay: tableプロパティがあり、内側のdivにはプロパティがありdisplay: table-cellます。vertical-align内部divのプロパティをtop、middle、またはbottomに設定できます。

HTML：

<div class="table">
    <div class="table-cell middle">
        <img src="https://www.google.ca/images/srpr/logo3w.png" alt="" />
    </div>
</div>​

CSS：

.table {
    display: table;
    width: 100px;
    height: 100px;
    border: 1px solid blue;
}
.table-cell {
    display: table-cell;
}
.middle {
    vertical-align: middle;
}
img {
    width: 100%;
    outline: 1px solid red;
}

これがフィドルです。

Answer 2

次のCSSを使用する場合と同様に、画像を垂直方向に揃えるには、画像の高さを知る必要があります。

div {
    position:relative;
    overflow:hidden;
}

div img {
    position:absolute;
    top:50%;
    margin-top:-XXXpx /*(where XXX px is half the height of the image)*/
}