div中的绝对img中心位置

Question

如果我不知道图像的宽度，如何将 img 与 div 或表格单元格中的绝对定位居中对齐？

例如

<div style="position: relative">
    <img style="position: absolute" />
</div>

Answer 1

将元素水平和垂直对齐到相对父级。

<div style="position: relative">
    <img class="centered" />
</div>

.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

'top' 和 'left' 设置为 50% 将使元素的左上角居中。X 和 Y 的平移是 -50% 将元素设置为父元素的确切中心。

有关浏览器支持，请查看此处： Translate2d - caniuse.com