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:

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

Publicidad
Centrar un DIV



También te interesaría...

Suscríbete a nuestra lista de correo

Etiquetas:, , ,

Publicidad

Deje un comentario