css - 如何使用前后伪元素使图像垂直和水平居中

Question

今天我参加了一个工作面试，被问到以下问题:

How can you center an image of unknown height and width both vertically and horizontally without the usage of tables (e.g. display:table-cell)?

有人提示我可以使用 before 和 after 伪元素来做到这一点，但我没有找到解决方案。能请大家帮忙吗？

Answer 1

可能是最简单的方法:

DEMO

img {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}