Выровнять по центру абсолютно позиционированного элемента
Вопрос
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
;
Решение
Ваша проблема может быть решена, если вы дадите 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 в абсолютное позиционирование:
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>
ДА:
div#thing { text-align:center; }