假设我有 div
,width: 300px
和 height: 200px
我希望此 div
中的任何图像都水平和垂直居中,无论图像大于还是小于 div
;
对于较小的图像 margin: 0 auto
效果很好,但较高的图像向右突出并且不居中。
对于更大的图像,这有效:
height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
我找不到这些的任何组合,也没有找到任何解决方案来完美居中该图像。
最佳答案
将position: absolute
添加到img
并将position: relative
添加到div
.el {
position: relative;
width: 100px;
height: 100px;
border: 1px solid black;
margin: 50px 150px;
}
img {
opacity: 0.4;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
<div class="el">
<img src="http://placehold.it/350x150">
<img src="http://placehold.it/50x50/000000/ffffff">
</div>
关于html - CSS 在 div 中居中图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37485593/