如何在没有：之前垂直居中图像

Question

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

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>

{{1}}