Las mejores formas de centrar elementos en CSS

Nota: Este artículo de blog es copia fiel del original redactado y publicado por @midudev

Si hay una broma recurrente en CSS siempre ha sido la dificultad de centrar un elemento tanto horizontal como verticalmente en condiciones. Durante muchos años nos han acompañado multitud de hacks para poder conseguirlo... pero hoy en día ya no es necesario.

Te voy a enseñar diferentes formas de cómo puedes centrar elementos en los dos ejes con CSS.

1. Usando grid y place-content

Con grid, centrar elementos en los dos ejes es sencillo. Es fácil de recordar y funciona muy bien para layouts grandes.

Digo casi porque los elementos que contiene tomarán la anchura del elemento más ancho... Un pequeño inconveniente que debes tener en cuenta.

.container {
    display: grid;
    place-content: center;
}

2. Flex y margin auto

Para elementos pequeños, como iconos, existe una sencilla forma de utilizar flex junto con margin: auto para centrar los elementos. Hace su trabajo en algunas situaciones complicadas, es fácil de recordar pero... bueno, todo lo que se basa en selectores que sean con asterisco hay que tomarlo con pinzas y, además, no se lleva bien con los overflows.

.container {
    display: flex;
}

.container > * {
    margin-auto: auto;
}

3. Con posiciones absolutas

Es uno de los más antiguos pero si ha resistido el paso del tiempo... ¡es por algo! Esta solución se basa en utilizar un position: absolute para centrar el elemento en el centro. Es perfecto especialmente para modales o elementos que deben sobreponerse para ser siempre visibles.

Lo malo es que necesita tener un contenedor relativo y que funciona bien cuando sólo hay uno... si empiezas a llenar tu código de esto, que huele a hack, vas a tener muchos quebraderos de cabeza.

Ojo, que este hack se debe aplicar directamente sobre el elemento que se quiera centrar y no el contenedor.

.element {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

4. La mejor solución 🏆: Flexcelente

Sin ninguna duda, la solución más correcta y que, justamente, está pensada para ello es usar flex junto con align-items y justify-content a center.

• align-items: define el comportamiento de los elementos a través del eje contrario al principal (si el flex-direction es column, entonces serían las filas).

• justify-content: define el alíneamiento y distribución de los elementos en el eje principal (si el flex-direction es column, entonces serían las columnas).

De esta forma, podemos hacer lo siguiente:

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

Conclusiones

Desde luego mi favorita es la última. No tiene desventajas, excepto el lío que te puedas hacer con las propiedades justify-content y align-items, y hace justamente lo que se espera.

En ocasiones la solución de position: absolute para modales puede funcionar bien o para layouts muy grandes, usar display: grid es interesante para layouts grandes (por ejemplo, para centrar todo el contenido de tu página).

¡Espero que a partir de ahora ya no tengas problemas en centrar elementos con CSS! ✌️