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:
¿Este contenido te fue útil? Invítame un cafecito y ayúdame seguir creando más contenido. ¡Gracias! ♥︎
Invítame un cafecito
