Вирівнювання по центру на абсолютно розташованому розд

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;

Ваша проблема може бути вирішена, якщо ви надаєте divфіксовану ширину таким чином:

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;
}

Я знаю, що запізнився на вечірку, але думав, що тут дам відповідь людям, яким потрібно розташувати абсолютний предмет горизонтально, коли ви не знаєте точної його ширини.

Спробуйте це:

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

Той самий прийом можна також застосувати, коли вам може знадобитися вертикальне вирівнювання, просто відрегулювавши властивості так:

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

Щоб відцентрувати його як по вертикалі, так і по горизонталі, зробіть це:

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

Якщо вам потрібно мати відносну ширину (у відсотках), ви можете обернути свій div в абсолютно позиціонований:

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

Пам'ятайте, що для того, щоб позиціонувати елемент абсолютно, батьківський елемент повинен розташовуватися відносно.

У мене була та сама проблема, і моє обмеження полягало в тому, що я не можу мати заздалегідь визначену ширину. Якщо ваш елемент не має фіксованої ширини, спробуйте це

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>

Або ви можете використовувати відносні одиниці виміру, наприклад

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

Так:

div#thing { text-align:center; }