Выравнивание по центру на абсолютно Позиционированном Div
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
;
6 ответов:
ваша проблема может быть решена, если вы даете свой
div
фиксированная ширина, как показано ниже:div#thing { position: absolute; top: 0px; z-index: 2; width:400px; margin-left:-200px; left:50%; }
Я знаю, что опаздываю на вечеринку, но я думал, что дам ответ здесь для людей, которым нужно горизонтально расположить абсолютный элемент, когда вы не знаете его точную ширину.
попробуйте это:
// 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>