如何在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中（因为它是动态生成的），将style=""属性添加到<div>，其中包含图片的网址：

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

您也可以使用<img>内的<div>标记执行此操作：

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

Demo

Answer 3

虽然这个帖子已经老了但我得到了一个建议

试

＆LT; div style =＆＃39; text-align：center; overflow：hidden; width：200px; height：200px;＆＃39; ＆GT; ＆LT; img src =＆＃39; anypath＆＃39;宽度=＆＃39; 190＆＃39;式=＆＃39;垂直对齐：中部;显示：内联;＆＃39; /＆GT;

工作得很好！古德勒克