Выравнивание центра на абсолютно позиционированном Div

Ответ 1

Ваша проблема может быть решена, если вы указали свою фиксированную ширину div следующим образом:

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

Ответ 2

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

Ответ 3

Я знаю, что опаздываю на вечеринку, но я думал, что дам здесь ответ для людей, которым нужно горизонтально позиционировать абсолютный элемент, когда вы не знаете его точной ширины.

Попробуйте следующее:

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

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

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

Ответ 4

Если вам необходимо иметь относительную ширину (в процентах), вы можете обернуть свой div в абсолютном позиционировании:

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

Помните, что для того, чтобы позиционировать элемент абсолютно, родительский элемент должен располагаться относительно.

Ответ 5

У меня была такая же проблема, и мое ограничение заключалось в том, что у меня не может быть предопределенной ширины. Если ваш элемент не имеет фиксированной ширины, попробуйте это

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>

Ответ 6

Чтобы центрировать его вертикально и горизонтально, сделайте это:

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

Ответ 7

Да:

div#thing { text-align:center; }