这招对我很管用。

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

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

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

很长一段时间，我也尝试了解决方案，把img放在div的中心，但对于我的情况下，我只需要这种类型的组件在ajax加载进度，所以我简单地尝试了以下解决方案，希望这对你有帮助!

<div id="loader" style="position: absolute;top: 0;right: 0;left: 0;bottom: 0;z-index: 1;background: rgba(255,255,255,0.5) url('your_image_url') no-repeat center;background-size: 135px;display: none;"></div>

你可以通过使用display:flex CSS属性轻松做到这一点:

#over {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

  

我仍然有一些问题与其他解决方案在这里提出。最后，这对我来说是最好的:

<div class="parent">
    <img class="child" src="image.png"/>
</div>

css3:

.child {
 display: block;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 -webkit-transform: translate(-50%, -50%); /* Safari and Chrome */
 -moz-transform: translate(-50%, -50%); /* Firefox */
 -ms-transform: translate(-50%, -50%); /* IE 9 */
 -o-transform: translate(-50%, -50%); /* Opera */
 // I suppose you may like those too:
 // max-width: 80%;
 // max-height: 80%;
}

您可以在本页阅读更多关于这种方法的信息。