如何在没有以下情况下垂直居中放置图像：

Question

我想知道是否有另一种方法可以在不使用伪元素的情况下居中动态大小的图像：before。谢谢！

Answer 1

我喜欢这个选项CSS-Tricks。首先将图像定位在容器的top: 50%和left: 50%上，该容器将图像的左上角放在容器的中心。然后，您通过添加transform: translate(-50%, -50%)来修复其位置，这会将图像移回图像大小的一半。

.container { 
 
    position: relative; 
 
    width: 300px; 
 
    height: 200px; 
 
    border: 1px solid #ccc; 
 
    margin: 0 auto; 
 
} 
 

 
.center { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
}

<div class="container"> 
 
    <img src="http://placekitten.com/g/200/150" class="center" /> 
 
</div>