只需设置父div css属性“text-align:center;”

 <div style="text-align:center; width:100%">
        <img src="img.png"> 
 </div>

基本上，将左右边距设置为自动将导致图像居中对齐。

<div id="over" style="position:absolute; width:100%; height:100%>
<img src="img.png" style="display: block; margin: 0 auto;">
</div>

许多答案建议使用margin:0 auto，但只有当你试图使居中的元素不是浮动在左边或右边时，这才有效，即没有设置CSS属性float。为了做到这一点，将display属性应用到table-cell，然后将左右边距应用到auto，这样你的样式将看起来像style="display:table-cell;margin:0 auto;"

我已经尝试了许多方法，但只有这一种适用于容器div中的多个内联元素。下面是将div中的所有内容对齐在中间的代码。

CSS

.divContainer
{
    vertical-align: middle;
    text-align: center; <!-- If you want horizontal center alignment -->
}
.divContainer > *
{
    vertical-align: middle;
}

HTML

<div class="divContainer">
    <span>Middle Text</span>
    <img src="test.png"/>
</div>

示例代码在这里:https://jsfiddle.net/yogendrasinh/2vq0c68m/

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

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

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