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. Los campos requeridos están marcados *


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