下面是div

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

如何对齐图像,使其位于div的中间和中心?


当前回答

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

其他回答

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

标记的答案将不会垂直对齐图像。适合现代浏览器的解决方案是flexbox。flex容器可以配置为水平和垂直对齐其项。

<div id="over" style="position:absolute; width:100%; height:100%; display: flex; align-items: center; justify-content: center;">
    <img src="img.png">
</div>
img.centered {
   display: block;
   margin: auto auto;
}

这将是一种更简单的方法

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

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

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