Cómo centrar un DIV

El tag DIV es uno de los más utilizados, por lo cual es de mucha importancia saber cómo centrarlo dentro de otro div o dentro de todo el body. Sigue leyendo para conocer cómo centrar un div de la manera más fácil.

A continuación tenemos una de las estructuras de HTML más básicas:

<div id="container">
<div id="contenido">
<p>Contenido del DIV</p>
</div>
</div>

Tenemos un container que es el div principal, y dentro de aquel se encuentra el div contenido. Para que este método de centrado funcione, debemos definir los anchos de ambos DIVs.

Paso 1: Definir ancho del contenedor

Lo primero que haremos será establecer el ancho de nuestro div container a través de CSS. En este caso es de 500px:

#container {
width: 500px;
}

Paso 2: Definir ancho del DIV

 A continuación, estableceremos el ancho del div que deseamos centrar y agregaremos un lo siguiente que logrará centrar este div.

#contenido {
width: 300px;
margin: 0 auto;  
}

Resultado final

El resultado final sería el siguiente:

Centrar un DIV

Si te sirvió, ¡compártelo!

También te interesaría...

Suscríbete a nuestra lista de correo

Agregue un comentario

Su dirección de correo no se hará público.


Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.