下面是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的中间和中心?
当前回答
我向CSS添加了更多的属性。像这样:
div#over {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
-ms-align-items: center;
display: -webkit-flex;
display: -ms-flex;
display: flex;
}
其他回答
这为我工作,当你必须居中对齐图像和你的父div图像已经覆盖整个屏幕。即高度:100%,宽度:100%
#img{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
简单。2018. FlexBox。检查浏览器支持-我可以使用 最小的解决方案:
div#over {
display: flex;
justify-content: center;
align-items: center;
}
要获得尽可能广泛的浏览器支持:
div#over {
display: -webkit-flex;
display: -ms-flex;
display: flex;
justify-content: center;
-ms-align-items: center;
align-items: center;
}
<div style="display:table-cell; vertical-align:middle; text-align:center">
<img src="img.png">
</div>
我向CSS添加了更多的属性。像这样:
div#over {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
-ms-align-items: center;
display: -webkit-flex;
display: -ms-flex;
display: flex;
}
大多数解决方案都不起作用,因为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>