下面是div
<div id="over" style="position:absolute; width:100%; height:100%>
<img src="img.png">
</div>
如何对齐图像,使其位于div的中间和中心?
下面是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>