大多数解决方案都不起作用，因为100%高度的div并不意味着完整的浏览器高度。

使用高度:100vh;的工作原理。

<style type="text/css">
body {
  margin: 0;
}

#over {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
    vertical-align: middle;
}
</style>

<div id="over">
  <img src="test.png" alt="test" width="600">
</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不能很好地使用内联块对块元素)

#over {
    display: table-cell; 
    vertical-align: middle; 
    text-align: center;
    height: 100px;
}

根据您的需要修改高度值。

#over {position:relative; text-align:center; 
       width:100%; height:100%; background:#CCC;}

#over img{
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

你可以看看这个解决方案:

水平和垂直居中一个盒子中的图像

<style type="text/css">
.wraptocenter {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: ...;
    height: ...;
}
.wraptocenter * {
    vertical-align: middle;
}
.wraptocenter {
    display: block;
}
.wraptocenter span {
    display: inline-block;
    height: 100%;
    width: 1px;
}
</style>
<!--[if lt IE 8]-->
<style>
.wraptocenter span {
    display: inline-block;
    height: 100%;
}
</style>
<!--[endif]-->

<div class="wraptocenter"><span></span><img src="..." alt="..."></div>