Comment centrer horizontalement div dans parent parent

Question

Comment centrer horizontalement div dans sa société mère div avec CSS ?

 <div id='parent' style='width: 100%;'>
 <div id='child' style='width: 50px; height: 100px;'>Text</div>
</div>
 

Answer 1

Je suppose que la div mère n'a pas de largeur ou une largeur large, et la div enfant a une largeur plus petite. Ce qui suit va définir la marge pour le haut et le bas à zéro, et les côtés pour s'adapter automatiquement. Cela centre la div.

 div#child {
    margin: 0 auto;
}
 

Answer 2

<div id='parent' style='width: 100%;text-align:center;'>
 <div id='child' style='width:50px; height:100px;margin:0px auto;'>Text</div>
</div>

Answer 3

Vous pouvez utiliser la valeur "auto" pour les marges gauche et droite pour permettre au navigateur de répartir l’espace disponible de manière égale sur les deux côtés de la division interne:

 <div id='parent' style='width: 100%;'>
   <div id='child' style='width: 50px; height: 100px; margin-left: auto; margin-right: auto'>Text</div>
</div>
 

Answer 4

<div id='child' style='width: 50px; height: 100px; margin:0 auto;'>Text</div>