Question

在有人问我为什么要这么做之前，让我直接告诉你。那样你们其中一个聪明的偷看就可以告诉我一个更好的方法......

我正在制作一个能够拉伸以填充页面的绘画阅读器，确保屏幕高度的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

按left的宽度推送元素50%，然后50%水平翻译它对我有用。

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

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

Answer 2

使用JavaScript计算宽度并移动它，

使用CSS hack将元素左右移动50％，

或者不要绝对定位它。

这个答案非常简短，但它确实很重要。如果您需要集中某些东西（意味着您希望浏览器确定中心点的位置，并将其放置在那里），那么您就不能使用绝对定位 - 因为这会从浏览器中取消控制权。

要使画作相互褪色，我需要定位它们 “绝对”阻止他们堆叠。

这就是你的问题所在。你假设你需要绝对定位的原因是错误的。

如果您在将元素放置在彼此之上时遇到问题，将图像包装在一个绝对定位的容器中，该容器的宽度为100％且具有text-align: center

如果您确实认为必须进行绝对定位，可以使用以下黑客来达到您想要的效果：

div {
    position: absolute;
    /* move the element half way across the screen */
    left: 50%;
    /* allow the width to be calculated dynamically */
    width: auto;
    /* then move the element back again using a transform */
    transform: translateX(-50%);
}

显然上面的hack有一个糟糕的code smell，但它适用于某些浏览器。请注意：对于其他开发人员或其他浏览器（尤其是IE或移动设备）而言，此hack并不一定是显而易见的。

Answer 3

要取消Samec的答案，您还可以使用它来将未知尺寸的垂直和水平绝对位置元素居中：

#viewer_div {
  position: relative;
}
#viewer_div img {
  position: absolute;
  left: 50%;
  top: 0%;
  transform: translate(-50%, 50%);
}

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

3 个答案: