Comment centrez-vous horizontalement un DIV qui est absolument positionné dans un autre DIV?

Question

Comment centre-t-on horizontalement un DIV qui est absolument positionné dans un autre DIV?

HTML

<div style="width:250px;height:250px;background:red;position:relative;"> 
    <div style="width:100px;height:100px;background:blue;position:absolute;"></div> 
</div> 

Merci Vous

Answer 1

Ma réponse ne fonctionne que si l'arrière-plan de l'intérieur div n'a pas de couleur de fond. Comme votre exemple le fait, j'ajoute un troisième div. Le second est pour le centrage, le troisième est pour la coloration.

<div style="width:250px;height:250px;background:red;position:relative;"> 
    <div style="width:100px;height:100px;position:absolute;padding-left:50%;margin-left:-50px"> 
    <div style="background:blue;padding:0px;"></div> 
    </div> 
</div> 

La chose importante à noter ici est la suivante: padding-left:50%;margin-left:-50px;. -50px étant la moitié de la largeur de div.

Answer 2

<div style="width:250px;height:250px;background:red;position:relative;"> 
    <div style="width:100px;height:100px;background:blue;position:absolute; margin: auto;"></div> 
</div> 

l'auto de marge devrait centrer votre div à la fois horizontalement et verticalement

Answer 3

Si vous connaissez les dimensions de chaque div et vous prévoyez de continuer à utilisez position:absolute;, vous venez de définir les coordonnées top et left. Donc, quelque chose comme ça dans le intérieur div

top:75px; left:75px;

http://jsfiddle.net/jasongennaro/zQjaU/

* Peut être hors quelques px. Vous devrez peut-être ajuster.