將不同尺寸的圖像放置在中心位置？

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

現在，非常小的圖像或寬幅圖像確實在包裝的頂部對齊了，因為margin：auto似乎不起作用。 在那可以做些什么？

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