<分区>
html - 如何垂直居中对象大于其父对象？
我想实现这样的例子:
我知道如何通过在 css 中使用背景图像来做到这一点，但我不想这样做，因为对象可以是任何东西。它可以是 img、svg、canvas，甚至是 div。还有其他解决方案吗？
最佳答案
我几年前写过如何做到这一点:
https://codepen.io/vsync/pen/DpmnK
.box{
position:absolute; /* or relative */
/* assume box has height limit lower than the image height */
height: 100px;
/* demo-related styles: */
margin: auto;
top:0; right: 0; bottom: 0; left: 0;
background: lightblue;
}
/* The magic: */
.box > img{
position:relative;
top:50%;
left:50%;
transform:translate(-50%, -50%);
}<div class='box'>
<img src="https://via.placeholder.com/150x150/FF0000" />
</div>关于html - 如何垂直居中对象大于其父对象？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57371860/