Comment centrer horizontalement div à l'intérieur de div div

Question

Comment centrer un div horizontalement à l'intérieur de son parent div avec CSS?

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

Answer 1

Je suppose la div parent n'a pas la largeur ou une grande largeur 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. Ceci centre la div.

div#child { 
    margin: 0 auto; 
} 

Answer 2

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

Answer 3

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

Answer 4

Vous pouvez utiliser la valeur « auto » pour les marges gauche et droite pour laisser le navigateur distribuer l'espace disponible également sur les deux côtés de la div intérieure:

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

Answer 5

Juste d'intérêt, si vous voulez centrer deux ou plusieurs divs (donc ils sont côte à côte au centre), alors voici comment le faire:

<div style="text-align:center;"> 
    <div style="border:1px solid #000; display:inline-block;">Div 1</div> 
    <div style="border:1px solid red; display:inline-block;">Div 2</div> 
</div>