css - 如何将未知宽度的绝对定位内容居中？

Question

在有人问我到底为什么要这样做之前，让我直截了本地告诉你。那样的话，你们中的一个聪明人可以告诉我一个更好的方法......

我正在制作一个绘画查看器，它应该拉伸(stretch)以填满页面，准确地说是屏幕高度的 90%。我想让一幅画在另一幅画上淡出，并想让每幅画都在屏幕中间居中。

为了使绘画相互淡入淡出，我需要将它们定位为“绝对”以阻止它们堆叠。麻烦就在这里。自从我将它们设置为绝对值以来，我用来使包含的 div 居中的所有方法都不起作用。

部分问题是我没有为绘画设置任何宽度，因为我希望它们动态调整自己的大小以填充用户屏幕的 90%。

我已经找到了数百种使绝对内容居中的方法，并且我相信我可能需要收缩包装包含的 div。但是我还没有取得任何成功。

HTML-

<div id="viewer_div">
    <img src="" id="first" />
    <img id="second" class="hidden"/>
</div>

样式表

#viewer_div {
        width:1264px;
}


img {
    height:90%;
    display:block;
    margin-left: auto;
    margin-right:auto;
}

上面给出了我想要的效果，但不允许我绝对定位图像。任何人都可以建议一种使图像居中但也允许我将一个图像淡入另一个图像的方法吗？

Answer 1

将元素向左推到其宽度的50%，然后将其水平平移50%，这对我很有效。

.element {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
} 

我在以下链接中找到了这个概念，然后我进行了翻译以满足我的水平对齐需求:https://gist.github.com/colintoh/62c78414443e758c9991#file-douchebag-vertical-align-css