在绝对位置的Div上居中对齐

93

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>

div位于顶部，但是我不能将其以<center>or 居中margin: 0 auto。

html css xhtml

— 史蒂夫
source

152

如果给div定固定宽度，则可以解决以下问题：

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

— 雅各布·E
source

1

我不知道为什么我没有想到这一点，即使我们一直都使用相同的技术进行垂直居中...无论如何，谢谢，您为我节省了很多时间。

— Aayush

1

如果用户垂直向下滚动div会出现在页面顶部，而应该出现在可见区域怎么办

— PUG，

我在叠加层div中显示动态重定尺寸图像的缩略图，所以我不知道宽度。

— PUG 2012年

4

这只是一个解决方法，stackoverflow.com

— questions/1776915/…

1

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

— 苏珊2014年

97

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

— 马修斯·奥利维拉（Matheus Oliveira）
source

3

这是如何运作的？您能否提供答案有效的原因？

— afuzzyllama 2012年

1

我真的很喜欢这种方法，在99％的时间中，您不必处理填充，边框等问题。我从未见过这种方法失败，下一次请举例说明它是否适合您。

— 2013年

1

此解决方案的

— 妙处

1

哇。我没想到它会起作用，但是它对我来说就像一种魅力

— Awais Umar 2014年

4

我同意这应该是正确的答案，-200px的利润向我尖叫。

— Mani5556

36

我知道我晚会晚了，但是我想在这里为需要水平放置绝对物品的人提供答案，而您不知道它的确切宽度。

试试这个：

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

对于可能需要垂直对齐的情况，也可以应用相同的技术，只需调整属性即可，如下所示：

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

— 迈克尔·乔瓦尼·普莫
source

1

哇这太棒了！您能解释一下它是如何工作的吗？编辑：做了一些狩猎，看起来像是在左边：50％将div的左边位置移到了中心，而这并不是真正的中心。但是translateX会将其移回内容宽度的

— Aziz Javed

2

绝对定位将从项目的左上角开始。使用平移会将其移动到相对于其大小的数量。

— Michael Giovanni Pumo

3

迈克尔，只想让您知道，您来参加晚会的时间不晚...对于那些不知道的人：转化：翻译（-50％，-50％）; 用1条线同时进行垂直和水平居中

— Marvel Moe

4

要将其垂直和水平居中，请执行以下操作：

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

— 阿明
source

0

如果有必要具有相对宽度（以百分比为单位），则可以将div包装在绝对定位的位置：

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

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

— 达尔瓦拉纳
source

0

我遇到了同样的问题，但我的局限性在于我无法拥有预定义的宽度。如果您的元素没有固定的宽度，请尝试以下操作

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）
source

0

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

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

— 柳生
source

0

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

展开摘要

— 潘瓦尔
source

-22

是：

div#thing { text-align:center; }

5

这将在div中对齐内容。它不会使div在页面中心对齐。除了作为文档流一部分的内容之外，它也不会以任何其他方式对齐绝对定位的div。

— CarterMan