CSS：如何垂直和水平对齐图像？

我的页面有一个图像空间,可以说是最大100×100图像.用户可以上传任何图像维度,并且Web应用程序会将其大小调整为100×100.因此,可以将图像的大小调整为75×100或100×75等.

无论调整大小的图像的尺寸如何,我希望它在网页的分配空间中垂直和水平居中显示.我如何在CSS中执行此操作？我需要一个包含div,如下所示：

<div class="image_container">
     <image src="http://placehold.it/100x100/" height="100" width="100" alt=""/>
</div>

无论如何,样本CSS会有所帮助.谢谢！

解决方法

试试这个 – http://jsfiddle.net/zYx4g/
这适用于任何大小和所有浏览器的图像.

.image_container {
    width: 300px;
    height: 300px;
    background: #eee;
    text-align: center;
    line-height: 300px;
}

.image_container img {
    vertical-align: middle;
}
​

原文地址：https://www.jb51.cc/css/217822.html