在一個固定的div中水平和垂直居中不同大小的圖像

Question

我在這裏定位一個div裏面的圖像有點鬥爭。 該div固定爲219x197px，但圖像與wordpress加載，我需要證明它，以便即使圖像小於或大於它，它將居中和溢出隱藏，如果較大，拉伸或居中，如果較小（小的時候會發生什麼並不重要）。

我不想調整圖像大小，我只是想顯示它居中，任何適合顯示的div，其餘都隱藏着溢出。

我發現另一個問題，我設法水平居中它，但我不能做垂直。

我嘗試了一些margin-left與百分比，但它不是恆定的不同的圖像大小。 我也嘗試了一些與line-height和vertical-align東西，但似乎沒有任何工作正常。

有人知道我可以嘗試什麼嗎？提前致謝！ 這裏的HTML和CSS，因爲它的工作原理水平居中：

<div class="img_article"> 
<span> 
<?php get_post_image($post->ID,'large'); ?> 
</span> 
</div> 

.img_article { 
    border-bottom: 1px solid #EF5589; 
    overflow: hidden; 
    width: 219px; 
    height: 197px; 
    text-align: center; 
} 
.img_article > span { 
    display: block; 
    width: 1000px; 
    height: 1000px; 
    margin-left: -390px; /* -(width-container width)/2 */ 
} 
.img_article > span > img { 
    display: inline-block; 
} 

Answer 1

我不知道你試着用行高和垂直對齊，但它應該是工作。

.img-hold { height: 200px; line-height: 200px; text-align: center; } 
.img-hold img { verticale-align: middle; } 

Demo