Centrer sur une 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> 

Absolument Positionné Le div est en haut, mais je ne peux pas le centrer avec <center> ou margin: 0 auto;

Answer 1

Votre problème peut être résolu si vous donnez votre div une largeur fixe, comme suit:

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

Answer 2

Oui:

div#thing { text-align:center; } 

Answer 3

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

Answer 4

S'il est nécessaire pour vous d'avoir un parent largeur (en pourcentage), vous pouvez envelopper votre div dans un position absolue:

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

Rappelez-vous que pour positionner un élément absolument, l'élément parent doit être positionné de manière relative.

Answer 5

J'avais le même problème, et ma limite était que je ne peux pas avoir une largeur prédéfinie. Si votre élément ne dispose pas d'une largeur fixe, essayez cette

div#thing 
{ 
    position: absolute; 
    top: 0px; 
    z-index: 2; 
    left:0; 
    right:0; 
} 

div#thing-body 
{ 
    text-align:center; 
} 

puis modifiez votre code html pour ressembler à ce

<div id="thing"> 
<div id="thing-child"> 
    <p>text text text with no fixed size, variable font</p> 
</div> 
</div> 

Answer 6

Je sais que je suis en retard à la fête, mais je pensais fournir une réponse ici pour les personnes qui ont besoin de positionner horizontalement un objet absolu, lorsque vous ne connaissez pas sa largeur exacte.

Essayez ceci:

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

La même technique peut également être appliquée, quand vous pourriez avoir besoin alignement vertical, simplement en ajustant les propriétés comme ceci:

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