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

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

如果您确实认为需要绝对定位,可以使用以下hack来实现您期望的结果:

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有一种可怕的代码味道,但它适用于某些浏览器.请注意:对于其他开发人员或其他浏览器(尤其是IE或移动设备)而言,此hack并不一定是显而易见的.

Answer 3

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

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