97 
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；

4

9 回答 9

154

如果你给你div一个固定的宽度，你的问题可能会得到解决，如下所示：

div#thing {
    position: absolute;
    top: 0px;
    z-index: 2;
    width:400px;
    margin-left:-200px;
    left:50%;
}
于 2008-10-31T08:27:05.040 回答
100 
div#thing
{
    position: absolute;
    width:400px;
    right: 0;
    left: 0;
    margin: auto;
}
于 2012-12-10T17:45:43.550 回答
39

我知道我迟到了，但我想我会在这里为需要水平放置绝对项目的人提供答案，当你不知道它的确切宽度时。

试试这个：

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

也可以应用相同的技术，因为当您可能需要垂直对齐时，只需像这样调整属性：

// Vertical example.
div#thing {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
于 2016-08-16T10:56:59.273 回答
5

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

div#thing {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
}
于 2019-07-06T15:51:28.173 回答
1 

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

于 2020-04-21T09:41:47.663 回答
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>
于 2016-07-11T19:40:57.307 回答
0

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

#thing {
    position: absolute;
    width: 50vw;
    right: 25vw;
}
于 2019-10-29T17:20:57.913 回答
-1

如果你有必要有一个相对宽度（百分比），你可以将你的 div 包装在一个绝对定位的中：

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

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

于 2016-06-20T12:04:32.523 回答
-23

是的：

div#thing { text-align:center; }
于 2009-01-15T15:14:56.213 回答