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

Question

今天我参加了一个面试，面试官问了我这样一个问题:

如何在不使用表(例如display:table-cell)的情况下垂直和水平居中未知高度和宽度的图像?

我得到了一个提示，这是可能做到使用before和after伪元素，但我未能找到一个解决方案。你们能帮帮我吗?

Answer 1

可能是最简单的方法:

演示

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