¿Cómo Centrar un Div con CSS?

Una duda bastante recurrente entre aquellos que van iniciando en el mundo del desarrollo web es la de como centrar un contenedor en html. Durante muchos años han surgido multitud de hacks para poder conseguirlo… pero hoy en día ya no es necesario.

Si te encuentras luchando con la tarea de centrar un div, no te preocupes, ¡no estás solo!

Te voy a enseñar 3 formas distintas de centrar un div tanto horizontal como verticalmente:

3 Maneras de Centrar un Div

1. CSS Grid

Existen múltiples formas de centrar un div utilizando CSS grid pero la forma más rápida de lograrlo son estas dos simples líneas de código:

2. Position absolute

Es una de las formas más antiguas de centrar un div pero a día de hoy sigue vigente y funciona a la perfección. Se basa en utilizar la propiedad position: absolute para posicionar el elemento en el centro del contenedor padre.

3. Flexbox

Flexbox es una de las técnicas de CSS más utilizadas para personalizar diseños a día de hoy. La solución más correcta y que, justamente, está pensada para ello es usar display: flex junto con align-items y justify-content a center.

Mientras que justify-content determina la alineación de los elementos en el eje principal, align-items lo hace en el eje transversal o secundario