Daaawx的答案是可行的，但我认为如果我们消除内联css会更干净。

身体{ 保证金:0; ｝ #over img { margin-left:汽车; margin-right:汽车; 显示:块; ｝ div.example { 位置:绝对的; 宽度:100%; 高度:100%; ｝ <div class="example" id="over"> < img src = " http://www.garcard.com/images/garcard_symbol.png " > < / div >

使用自举程序align-items和justification -content。请看下面的例子:

<div class="well" style="align-items:center;justify-content:center;">
    <img src="img_source" height="50px" width="50px"/>
</div>

这招对我很管用。

<div class="CenterImage">
         <asp:Image ID="BrandImage" runat="server" />
</div>

注意:在这种情况下，没有与'BrandImage'相关的css类

CSS:

.CenterImage {
    position:absolute; 
    width:100%; 
    height:100%
}

.CenterImage img {
    margin: 0 auto;
    display: block;
}

在我看来，您还希望图像在容器中垂直居中。(我没有看到任何答案提供了这一点)

工作小提琴:

纯CSS解决方案 不中断文档流(没有浮动或绝对定位) 跨浏览器兼容性(甚至包括IE6) 完全响应。

HTML

<div id="over">
    <span class="Centerer"></span>
    <img class="Centered" src="http://th07.deviantart.net/fs71/200H/f/2013/236/d/b/bw_avlonas_a5_beach_isles_wallpaper_image_by_lemnosexplorer-d6jh3i7.jpg" />
</div>

CSS

*
{
    padding: 0;
    margin: 0;
}
#over
{
    position:absolute;
    width:100%;
    height:100%;
    text-align: center; /*handles the horizontal centering*/
}
/*handles the vertical centering*/
.Centerer
{
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.Centered
{
    display: inline-block;
    vertical-align: middle;
}

注意:此解决方案适用于在任何元素中对齐任何元素。 对于IE7，当在块元素上应用.居中类时，你将不得不使用另一个技巧来让内联块工作。(这是因为IE6/IE7不能很好地使用内联块对块元素)

<div style="display:table-cell; vertical-align:middle; text-align:center">
<img src="img.png">
</div>

这将是一种更简单的方法

#over > img{
    display: block;
    margin:0 auto; 
}