这是一种老式的解决方案，但浏览器市场份额已经足够大了，如果你不担心IE7的性能下降，你可能不需要IE黑客的部分。当你知道外部容器的尺寸，但可能知道也可能不知道内部图像的尺寸时，这种方法是有效的。

.parent {
    display: table;
    height: 200px; /* can be percentages, too, like 100% */
    width: 200px; /* can be percentages, too, like 100% */
}

.child {
    display: table-cell;
    vertical-align: middle;
    margin: 0 auto;
}

 <div class="parent">
     <div class="child">
         <img src="foo.png" alt="bar" />
     </div>
 </div>

就我个人而言，我会把它作为div的背景图像，CSS是这样的:

#demo {
    background: url(bg_apple_little.gif) no-repeat center center;
    height: 200px;
    width: 200px;
}

(假设一个id="demo"的div，因为你已经指定了高度和宽度，添加背景应该不是问题)

让浏览器承担压力。

一个简单而优雅的解决方案，每次都适用于我:

<div>
    <p style="text-align:center"><img>Image here</img></p>
</div>

你可以设置图像的位置是对齐中心水平

#imageId {
   display: block;
   margin-left: auto;
   margin-right:auto;
}

这对我很管用。将此添加到image css:

img
{
   display: block;
   margin: auto;
}

你可以使用以下属性轻松做到这一点:

#内容{ 显示:flex; 对齐项目:中心; 宽度:200 px; 身高:200 px; 边框:1px纯红色; ｝ # myImage { 显示:块; 宽度:50 px; 高度:50 px; 保证金:汽车; 边框:1px纯黄色; ｝ < div id = "内容" > <img id="myImage" src="http://blog.w3c.br/wp-content/uploads/2013/03/css31-213x300.png"> < / div >

引用:W3