Căn giữa trên một vạch định vị tuyệt đối

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 ở trên cùng, nhưng tôi không thể căn giữa nó với <center>hoặc margin: 0 auto;

Vấn đề của bạn có thể được giải quyết nếu bạn cung cấp divchiều rộng cố định, như sau:

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

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

Tôi biết mình đến bữa tiệc muộn, nhưng tôi nghĩ rằng tôi sẽ cung cấp câu trả lời ở đây cho những người cần định vị theo chiều ngang của một mục tuyệt đối, khi bạn không biết chiều rộng chính xác của nó.

Thử cái này:

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

Kỹ thuật tương tự cũng có thể được áp dụng, khi bạn có thể cần căn chỉnh theo chiều dọc, chỉ cần điều chỉnh các thuộc tính như sau:

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

Để căn giữa nó theo cả chiều dọc và chiều ngang, hãy làm như sau:

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

Nếu bạn cần có chiều rộng tương đối (tính theo phần trăm), bạn có thể bọc div của mình ở vị trí tuyệt đối:

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

Hãy nhớ rằng để định vị tuyệt đối một phần tử, phần tử mẹ phải được định vị tương đối.

Tôi đã gặp vấn đề tương tự và hạn chế của tôi là tôi không thể có chiều rộng được xác định trước. Nếu phần tử của bạn không có chiều rộng cố định, hãy thử điều này

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

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

sau đó sửa đổi html của bạn để trông giống như thế này

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

Hoặc bạn có thể sử dụng các đơn vị tương đối, ví dụ:

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

Đúng:

div#thing { text-align:center; }