異なる次元の画像を中央に配置しますか？

Question

概要グリッド内に表示する必要がある画像が異なる複数の画像があります。イメージは全く異なる次元と比率を持ち、これらのイメージのラッパーは常に同じ高さと幅です。

イメージを常にラッパーの中央に配置したいが、それは動作しません。自動車のdoesn：

は、私はそのイメージ

.content_page .slide_content .product img { 
    /* max-height: 100%; */ 
    height: auto; 
    width: 100%; 
    margin: auto; 
    float: none; 
    border: none; 
} 

用と1

.content_page .slide_content .product { 
    width: 27%; 
    float: none; 
    display: inline-block; 
    margin: 30px 3%; 
    position: relative; 
    height: 400px; 
    overflow: hidden; 
    border-top: 1px solid #121224; 
} 

非常に小さいまたはワイド画像は今マージンとしてラッパーの上部に整列のですかラッパーの使用しますうまくいきません。 Idはそこで何をすることができますか？

Answer 1

.content_page .slide_content .product { 
    width:<some width>; 
    height:<some width>; 
    position:relative; 
} 

.content_page .slide_content .product > img { 
    max-width:100%; 
    max-height:100%; 
    position:absolute; 
    left:0; right:0; top:0; bottom:0; 
    margin:auto; 
} 

Answer 2

設定マージンは左右オートようと中間垂直整列を使用

.content_page .slide_content .product img { 
/* max-height: 100%; */ 
height: auto; 
width: 100%; 
display:inline-block; 
vertical-align:middle; 
margin-left:auto; 
margin-right:auto; 
float: none; 
border: none; 
}