在絕對定位的 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>

div 位於頂部，但我無法使用<center>或margin: 0 auto其<center> ；

Answer 1

如果你給你的div一個固定的寬度，你的問題可能會得到解決，如下所示：

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

Answer 2

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

Answer 3

我知道我遲到了，但我想我會在這里為需要水平定位絕對項目的人提供一個答案，當你不知道它的確切寬度時。

嘗試這個：

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

也可以應用相同的技術，當您可能需要垂直對齊時，只需像這樣調整屬性：

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

Answer 4

要垂直和水平居中，請執行以下操作：

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

Answer 5

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

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>

Answer 7

或者您可以使用相對單位，例如

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

Answer 8

如果你有必要有一個相對寬度（百分比），你可以將你的 div 包裝在一個絕對定位的 div 中：

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

請記住，為了絕對定位元素，必須相對定位父元素。

Answer 9

是的：

div#thing { text-align:center; }