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

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

将元素向左推送其宽度的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 或移动设备）来说不一定是显而易见的。

Answer 3

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

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

Answer 4

使用 position:absolute 和 width:unknown 居中 div：

HTML:

<div class="center">
  <span></span>

  <div>
    content...
  </div>

</div>

CSS：

.center{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: auto auto;

  /* if you need the overflow */
  overflow: auto;
}

即使内容比屏幕宽度更宽，也可以使用此解决方案，并且不需要到 transform:translate （可以模糊元素）

---

工作原理：

Grid 将在第一个 auto 之前插入一个 span，并插入一个 >div 就在第二个 auto 之前，并且你会得到：

span(0px) - auto - div(...px) - auto

auto 将彼此相等。

---

与垂直居中相同，但编写grid-template-rows而不是grid-template-columns

Answer 5

2021

采用网格和插图实现绝对居中内容的现代方法

inset CSS 属性是对应于顶部、右侧、底部和/或左侧的简写。 MDN

#viewer_div {
  display: grid;
  place-items: center;
  position: absolute;
  inset: auto 0;
}

*,
::after,
::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

body {
  width: 100vw;
  height: 100vh;
  background-color: hsl(201, 27%, 10%);
  position: relative;
}

#viewer_div {
  display: grid;
  place-items: center;
  position: absolute;
  inset: auto 0;
  background-color: hsl(197, 7%, 21%);
  color: white;
}

<div id="viewer_div">
  <h1>Title 2021</h1>
  <img src="https://via.placeholder.com/180x100.png/09f/fff" id="first" />
</div>