如何將div中大小未知的圖像在垂直和水平方向上居中？

Question

我希望處理用戶上傳的文件。 這種情況下的主要問題是它們的大小不同。

如何將垂直和水平未知大小的圖像居中放置div？

非常感謝

編輯：我正在為圖像制作縮略圖。 基本上，我希望將div保持相同的大小，並且希望該div中的圖像適合div，但不更改比例。 我正在使用overflow:hidden

編輯：我的代碼是

<div class='pic'><img id='theimage' src='image.png'></div>

而我的CSS是

#theimage {
    vertical-align: middle;
    display: inline;

}

Answer 1

您可以使用background CSS屬性來執行此操作。 給您的<div>這些屬性：

div.whatever {
    background-position: center center;
    background-repeat: no-repeat; 
}

然后在您的HTML中（因為它是動態生成的），在其中包含圖像URL的<div>添加一個style=""屬性：

<div style="background-image: url('/path/to/image.png');"></div>

您也可以在<div>內使用<img>標記執行此操作：

<div>
    <img src="image.png">
</div>

使用此CSS（未經測試，應該可以工作）：

div {
    text-align: center;
}

div img {
    vertical-align: middle;
    display: inline;
}

我假設您在其他地方給<div>了固定的寬度和高度。

Answer 2

強制容器充當表單元格。

#container {
     display: table-cell; 
     vertical-align: middle; 
     text-align: center;
}

演示版

Answer 3

雖然這個主題很舊，但我有個建議

嘗試

<div style ='text-align：center; overflow：hidden; width：200px; height：200px;' > <img src ='anypath'width ='190'style ='vertical-align：middle; display：inline;' />

效果很好！ 祝好運