不同尺寸的位置圖像居中？

Question

我有不同圖像的多個圖像，我需要在概覽網格中顯示。圖像確實有完全不同的尺寸和比例，這些圖像的包裝總是相同的高度和寬度。

我想定位圖像總是在包裝的中心，但不起作用。

我使用的圖像

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

和一個

.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; 
}