下面是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的中间和中心?
当前回答
现在是2016年……为什么不使用flexbox? 它的反应也很灵敏。享受。 在{# 显示:flex; 对齐项目:中心; justify-content:中心; } < div id = " / " > < img src = " http://www.garcard.com/images/garcard_symbol.png " > < / div >
其他回答
<div style="display:table-cell; vertical-align:middle; text-align:center">
<img src="img.png">
</div>
这将是一种更简单的方法
#over > img{
display: block;
margin:0 auto;
}
大多数解决方案都不起作用,因为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>
身体{ 保证金:0; } #over img { margin-left:汽车; margin-right:汽车; 显示:块; } <div id="over" style="位置:绝对;宽度:100%;高度:100%”> < img src = " http://www.garcard.com/images/garcard_symbol.png " > < / div >
JSFiddle
基本上,将左右边距设置为自动将导致图像居中对齐。
<div id="over" style="position:absolute; width:100%; height:100%>
<img src="img.png" style="display: block; margin: 0 auto;">
</div>