Cómo centrar horizontalmente div dentro del elemento primario div

Question

¿Cómo centro un div horizontalmente dentro de su elemento primario div con CSS?

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

Answer 1

estoy asumiendo el div padre no tiene anchura o una anchura de ancho, y el div niño tiene una anchura menor. Lo siguiente establecerá el margen para la parte superior e inferior a cero, y los lados para ajustar automáticamente. Esto centra el 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

Usted puede utilizar el valor "auto" para los márgenes izquierdo y derecho para que el navegador distribuir el espacio disponible igualmente en ambos lados de la div interior:

<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

Justo fuera de interés, si se desea centrar dos o más divs (por lo que están al lado del otro en el centro), entonces aquí es cómo hacerlo:

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