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

Posted 2023-03-05

【中文标题】如何将未知宽度的绝对定位内容居中？

【英文标题】：How do I centre absolutely positioned content of unknown width?

【发布时间】：2012-03-11 04:34:13

【问题描述】：

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

我正在为应该伸展以填满页面的绘画制作查看器，准确地说是屏幕高度的 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;

上面给了我想要的效果，但不允许我定位图像绝对。谁能建议一种使图像居中的方法，但也可以让我淡出另一个？

【问题讨论】：

嗯，这是一场考验。我相信你知道如何用固定宽度和绝对定位来做到这一点，对吧？

经过一番折腾，我可以保证你不能用纯 CSS 和 (x)HTML 做到这一点。你需要javascript。不幸的是，因为这纯粹是关于显示的，这就是 CSS 的用途……如果你愿意，你可以分叉我的小提琴 jsfiddle.net/dekket/58BjM。据我所知，所以真的无处可去：/

感谢您的意见。 Greg 在下面展示了一种更简洁的方法来解决我的问题。

看一下，这里回答***.com/questions/17069435/…

@AntonIskandiarov 如果你有一个基于百分比的宽度，例如width: 90%;。这是用于未知/自动宽度，例如width: auto;，不幸的是，除非将宽度设置为某个值（包括百分比），否则链接的答案会将其视为width: 100%。您当然可以使用该技巧添加带有width: 100%; 的包装器div，然后以通常的方式将此内容居中放置...

【参考方案1】：

将元素 left 按其宽度的50% 推，然后将其水平平移 50% 对我有用。

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

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

【讨论】：

很棒的解决方案。完美运行。

对于浏览器支持，看起来这适用于除 IE8 和 Opera Mini 之外的所有设备：caniuse.com/#feat=transforms2d

嗯...在 ios 上给我带来了麻烦。

传奇！谢谢！

双图例 thx

【参考方案2】：

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

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

或者不要绝对定位它。

---

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

---

要让画作相互淡入，我需要定位它们 'absolute' 阻止它们堆叠。

这就是你的问题所在。您认为出于错误的原因需要绝对定位。

如果您在将元素放在一起时遇到问题，将图像包装在绝对定位的容器中，该容器是 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 有一个糟糕的code smell，但它适用于某些浏览器。请注意：这种 hack 对于其他开发人员或其他浏览器（尤其是 IE 或移动设备）不一定显而易见。

【讨论】：

谢谢格雷格，这很奏效。我认为它必须比我制作的更简单。

我对“这篇文章是否有帮助”表示“是”，这就是您的意思吗？

啊，明白了。再次欢呼，你不知道它造成了多少悲伤。

非常好的答案，效果很好。在我的代码中，我还给了子元素（在这个问题的情况下的图像）“位置：相对”和一个高于它所覆盖的元素的 z-index。这允许子元素（而不是其全角父元素）位于它所在的元素的前面。

这个答案很有用，很有帮助，但最终是不正确的。最近的答案是正确的。

【参考方案3】：

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

#viewer_div 
  position: relative;

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

【参考方案4】：

居中 div 与 position: absolute 和 width: unknown:

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（可以模糊元素）

---

它是如何工作的：

网格会在第一个auto之前插入一个span，并在第二个auto之前插入一个div，你会得到：

span(0px) - 自动 - div(...px) - 自动

auto 将彼此相等。

---

垂直居中也一样，但写grid-template-rows而不是grid-template-columns

【参考方案5】：

2021

使用 grid 和 inset

实现绝对居中内容的现代方法

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>