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

Question

今天我参观了面试，并被问到以下问题：

  

如果不使用表格（例如display:table-cell），如何在垂直和水平方向居中显示未知高度和宽度的图像？

我得到了一个暗示，使用before和after伪元素可以做到这一点，但我找不到解决方案。你能帮忙吗？

Answer 1

可能是最简单的方法：

DEMO

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