Imagen destacada del artículo Cómo centrar un div con css

Cómo centrar un div con css

html svgcss svg
actualizado: 30 / 12 / 2022

En el mundo del desarrollo web, a menudo es necesario centrar elementos en una página para darle una apariencia más atractiva y organizada. Una de las formas más comunes de hacerlo es utilizando el elemento div, que se puede centrar fácilmente con CSS.

Ya tenemos un artículo acerca de cómo centrar el texto de un elemento en este artículo nos centraremos como poner los divs o otras etiquetas en el centro de la pantalla independientemente del texto del elemento.

1. Centrar div usando el método "margin: 0 auto"

Una forma común de centrar un div es utilizando "margin: 0 auto". Este método funciona colocando margen automático tanto a la izquierda como a la derecha del elemento, lo que lo hace centrado en la página.

css
div {
width: 200px;
height: 200px;
background: red;
margin: 0 auto;
}

2. Centrar div con "display: flex" y "justify-content: center"

Otra forma de centrar un div es utilizando el método "display: flex" y "justify-content: center". Este método funciona convirtiendo el elemento div en un elemento flex y alineando el contenido al centro.

html
<div>
<p>Texto de prueba</p>
</div>

Para este ejemplo necesitamos posicionar un párrafo en el centro de la pantalla, para eso envolvemos la etiqueta p dentro de un div y añadimos el siguiente css.

css
div {
width: 100%;
display: flex;
justify-content: center;
}

3. Centrar div con "display: grid" y "place-content: center"

Esta forma de centrar un div toma las mismas bases del método anterior pero gracias utilizamos css grid en lugar de flexbox.

html
<div>
<p>Texto de prueba</p>
</div>
css
div {
width: 100%;
display: grid;
place-content: center;
}

4. Centrar div con "position: absolute" y "left: 50%"

También es posible centrar un div utilizando el método "position: absolute" y "left: 50%". de esta forma podemos posicionar el elemento div de forma absoluta y moviéndolo al 50% del ancho de la página.

html
<div></div>
css
div {
width: 200px;
height: 200px;
background: red;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
Artículos relacionados:
Cómo insertar estilos css en html

Imagen destacada del artículo Cómo insertar estilos css en html

Cómo poner color de fondo en html con css

Imagen destacada del artículo Cómo poner color de fondo en html con css

Cómo cambiar color de texto html con css

Imagen destacada del artículo Cómo cambiar color de texto html con css

Cómo crear un formulario de contacto con html

Imagen destacada del artículo Cómo crear un formulario de contacto con html

Top 8 lenguajes backend más usados en la actualidad

Imagen destacada del artículo Top 8 lenguajes backend más usados en la actualidad

Calcular cuantos días hay entre dos fechas con javascript

Imagen destacada del artículo Calcular cuantos días hay entre dos fechas con javascript

Headless cms (cms sin cabeza) que es y porque deberías usarlo

Imagen destacada del artículo Headless cms (cms sin cabeza) que es y porque deberías usarlo

Cómo centrar una tabla html con css

Imagen destacada del artículo Cómo centrar una tabla html con css