Центр Align на абсолютно позиционируемый Div

Question

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;

Answer 1

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

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

Answer 2

Да:

div#thing { text-align:center; } 

Answer 3

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

Answer 4

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

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

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

Answer 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> 

Answer 6

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

Попробуйте это:

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

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

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