绝对定位的Div如何居中对齐

Question

div#thing {
  position: absolute;
  top: 0px;
  z-index: 2;
  margin: 0 auto;
}

<div id="thing">
   <p>text text text with no fixed size, variable font</p>
</div>

在顶部，但我无法使用<center>或margin: 0 auto来使其居中。

- Steve

Answer 1

如果您为 div 设置一个固定的宽度，问题可能会得到解决，方法如下：

div#thing {
    position: absolute;
    top: 0px;
    z-index: 2;
    width:400px;
    margin-left:-200px;
    left:50%;
}

- JacobE

---

我不知道为什么我没有想到那个，尽管我们一直使用相同的技术来实现垂直居中...无论如何，谢谢你，你帮我节省了很多时间。 - Aayush

如果用户已经垂直滚动，那么 div 出现在页面顶部，而它应该出现在可见区域。 - PUG

我正在我的覆盖层div中显示动态调整大小的图像缩略图，因此我不知道它们的宽度。 - PUG

这只是一个权宜之计，https://dev59.com/BnI-5IYBdhLWcg3wlpiW 似乎是解决方案。 - PUG

这不是正确的答案。不同的媒体类型将不支持此代码片段。 - Sushan

Answer 2

div#thing
{
    position: absolute;
    width:400px;
    right: 0;
    left: 0;
    margin: auto;
}

- Matheus Oliveira

---

这是如何工作的？您能否提供您的答案为什么有效的原因？ - afuzzyllama

99%的时间我真的很喜欢这种方法，因为你不必处理填充、边框等问题。我从未见过它失败，如果它对你失败了，请下次提供一个例子。 - Dan

这个解决方案的酷炫之处在于它也适用于百分比，只是不确定是否跨浏览器兼容。 - maljukan

这个的美妙之处在于你不需要知道它的宽度。 - MarcGuay

我同意这应该是正确的答案，-200像素的边距让我感觉像是hack。 - Mani5556

Answer 3

我知道我来晚了，但我想为那些需要在水平方向上定位绝对元素的人提供一个答案，即使你不知道它的确切宽度。

试试这个方法：

// Horizontal example.
div#thing {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

同样的技术也可以应用于需要垂直对齐的情况，只需调整属性即可：

// Vertical example.
div#thing {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

- Michael Giovanni Pumo

---

哇塞，这太棒了！你能解释一下它是如何工作的吗？编辑：我找了一些资料，似乎 left: 50% 将 div 的左侧位置移动到中心，但实际上并不是中心。但是 translateX 将其向后移动了内容宽度的 50%。 - azizj

绝对定位将从项目的左上角定位。使用转换将使其相对于其大小移动到相应的位置。 - Michael Giovanni Pumo

Michael，我只是想让你知道，你没有迟到......而且对于那些不知道的人来说：transform: translate(-50%，-50%)只需要一行代码就可以同时实现垂直和水平居中。 - Marvel Moe

Answer 4

为了使它垂直和水平居中，请执行以下操作：

div#thing {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
}

- Armin

Answer 5

.contentBlock {
    width: {define width}
    width: 400px;
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
 
}

- panwar

Answer 6

我遇到了同样的问题，我的限制是不能有预定义的宽度。如果您的元素没有固定的宽度，请尝试这个方法

div#thing 
{ 
  position: absolute; 
  top: 0px; 
  z-index: 2; 
  left:0;
  right:0;
 }

div#thing-body
{
  text-align:center;
}

然后修改你的HTML代码，使其看起来像这样。

<div id="thing">
 <div id="thing-child">
  <p>text text text with no fixed size, variable font</p>
 </div>
</div>

- Usman Shaukat

Answer 7

或者你可以使用相对单位，例如：

#thing {
    position: absolute;
    width: 50vw;
    right: 25vw;
}

- Aliaksei

Answer 8

如果您需要相对宽度（以百分比为单位），您可以将 div 包装在绝对定位的容器中：

div#wrapper {
    position: absolute;
    width: 100%;
    text-align: center;
}

请记住，为了绝对定位一个元素，父元素必须相对定位。

- dalvallana

Answer 9

是的：

div#thing { text-align:center; }

- violinista

---

这将使div内部的内容对齐，但不会将div居中于页面。它也无法对绝对定位的div进行任何对齐，除非其中的内容是文档流的一部分。 - CarterMan