Cómo centrar div horizontalmente dentro de div padre

114

¿Cómo centro un divhorizontalmente dentro de su padre divcon CSS?

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

html css Águila
fuente

1

Aquí hay dos métodos simples para centrar divs dentro de divs, verticalmente, horizontalmente o ambos (CSS puro): stackoverflow.com/a/31977476/3597276

Michael Benjamin

158

Supongo que el div principal no tiene ancho o un ancho ancho, y el div secundario tiene un ancho más pequeño. Lo siguiente establecerá el margen de la parte superior e inferior en cero, y los lados se ajustarán automáticamente. Esto centra el div.

div#child {
    margin: 0 auto;
}

Mark Embling
fuente

@Marca. ¿Sabes cómo hacer que funcione en IE6? IE6 realmente apesta mucho, pero todavía hay algunas personas que lo usan.

Bakhtiyor

@Bakhtiyor: que yo recuerde, lo hace. ¿Qué problemas estás viendo? es posible que desee abrir una nueva pregunta si hay algún problema específico que no se haya abordado antes. Sin embargo, no tengo acceso a IE6 para consultar.

Mark Embling

3

@Bakhtiyor: de hecho, habiéndolo pensado, creo que en IE.old también debes configurar text-align: center;el parentdiv y luego volver a configurarlo a la izquierda (o lo que sea) para el childuno. No estoy seguro si ese problema afecta a IE6 ...

Mark Embling

@Mark & @Bakhtiyor, por alguna razón, mi childdiv aparentemente se movió hacia la izquierda, en comparación con los navegadores que cumplen con los estándares, en todas las versiones de IE que verifiqué (IE6-8). Y text-align: center;por el parenty text-align: left;por el childarreglado para todas esas versiones.

brookmarker

7

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

James Goodwin
fuente

2

Esta solución es compatible con IE 6, pero no olvide agregar text-align:left;al div

#child

1

text-align:centeral div hijo o al div padre?

Anish Nair

6

Solo por interés, si desea centrar dos o más divs (para que estén uno al lado del otro en el centro), aquí le mostramos 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>

Paul Chris Jones
fuente

4

Puede usar el valor "auto" para los márgenes izquierdo y derecho para permitir que el navegador distribuya el espacio disponible por igual en ambos lados del div interno:

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

x4u
fuente

2

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

Soufiane Hassou
fuente

Cómo centrar div horizontalmente dentro de div padre

Respuestas: