下面是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的中间和中心?
当前回答
#over {
display: table-cell;
vertical-align: middle;
text-align: center;
height: 100px;
}
根据您的需要修改高度值。
其他回答
试试下面的代码:
<div class="outer">
<img src="image.png"/>
</div>
和CSS:
.outer{
text-align: center;
}
.outer img{
display: inline-block;
}
#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;
}
只需设置父div css属性“text-align:center;”
<div style="text-align:center; width:100%">
<img src="img.png">
</div>
<div style="display:table-cell; vertical-align:middle; text-align:center">
<img src="img.png">
</div>
这为我工作,当你必须居中对齐图像和你的父div图像已经覆盖整个屏幕。即高度:100%,宽度:100%
#img{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}