3 técnicas CSS contemporáneas para centrar elementos

Centrar elementos con HTML y CSS solía ser bastante difícil de hacer. Bueno, ya no lo es. Hay muchas maneras diferentes de hacerlo ahora. Y eso es bueno porque es posible que necesitemos diferentes opciones en diferentes escenarios. En este video veremos tres de mis formas favoritas de centrar elementos. Usaremos posicionamiento, luego usaremos flexbox y, por último, usaremos mi cuadrícula CSS de referencia.

Muy bien, vayamos a ello.

Es realmente extraño que haya sido tan difícil durante tanto tiempo simplemente colocar elementos en el centro de un contenedor en la Web. Bueno, el centrado horizontal era fácil, pero el centrado vertical era casi imposible hasta años más recientes.

Uso del posicionamiento CSS para centrar elementos

Este primer método, que utiliza posicionamiento CSS, probablemente ha existido por más tiempo, pero ha evolucionado un poco a medida que han surgido nuevas propiedades. Veamos un ejemplo.

Aquí tenemos este cuadro que queremos centrar en este otro contenedor con el borde rojo. Es un elemento fuerte y se coloca directamente dentro de un elemento div que es este cuadro rojo que estamos viendo aquí.

Usaremos posicionamiento absoluto para este método, así que agreguémoslo a nuestro elemento strong .

 strong { position: absolute; }

Ahora, para que esto funcione correctamente, nuestro div deberá crear un contexto de posicionamiento para colocar nuestro elemento. Hay muchas formas diferentes de hacer esto, pero la mejor opción para este ejemplo es utilizar el posicionamiento relativo.

 div { position: relative; }

Ahora podemos colocar nuestro elemento debajo del cincuenta por ciento de la altura de nuestro div y más del cincuenta por ciento del ancho. Para posicionarnos hacia abajo desde arriba podemos usar la nueva propiedad lógica, inset-block-start con un valor del cincuenta por ciento. Y para posicionarnos desde la izquierda podemos usar inset-inline-start con el mismo valor del cincuenta por ciento.

 strong { ... inset-block-start: 50%; inset-inline-start: 50%; } 

Ok, entonces no está exactamente centrado, ¿verdad?

Bueno, esto se debe a que hemos colocado el elemento en el centro de nuestro div , pero su posición se basa en su esquina superior izquierda. Lo que tenemos que hacer ahora es mover el elemento hacia arriba el cincuenta por ciento de su altura y hacia atrás el cincuenta por ciento de su ancho. Esto lo colocará correctamente en el centro. Pero, ¿cómo podemos hacer esto?

En realidad es muy fácil. Podemos usar la nueva propiedad translate de CSS. El primer valor se trasladará a lo largo del eje x. Necesitamos retroceder el cincuenta por ciento, por lo que agregaremos un valor de cincuenta por ciento negativo. Y el segundo valor se traslada a lo largo del eje y, le daremos el mismo valor de cincuenta por ciento negativo.

 strong { ... translate: -50% -50%; } 

Y ahí vamos. Perfectamente centrado.

Aquí está el ejemplo de trabajo final usando posicionamiento y traducción:

Esta es una forma en que podemos hacerlo, pero no es mi favorita.

Usando Flexbox para centrar elementos

Si puedo, prefiero usar Flexbox en lugar de posicionamiento porque es aún más fácil, requiere menos líneas de código, no hay contexto de posicionamiento y, sinceramente, parece una solución mejor y más moderna. Veamos un ejemplo.

Bien, entonces comenzamos desde el mismo punto, tenemos nuestro div externo con el borde rojo y luego nuestro elemento fuerte interno.

Comenzamos haciendo de nuestro div un contenedor flexible con display, flex. Luego podemos alinear nuestro elemento con el centro a lo largo del eje x con la propiedad justify-content y un valor de centro. Y por último, pero no menos importante, podemos alinear a lo largo del eje y con la propiedad align-items y el mismo valor de centro.

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

Y ahí lo tienes, el elemento está correctamente centrado y esta vez solo se necesitaron tres líneas de código para llegar allí.

Aquí está el ejemplo de trabajo final usando Flexbox:

Eso es genial y a veces tengo la necesidad de hacer esto, pero mi forma favorita de colocar elementos en el centro es usar la cuadrícula CSS. Y nuevamente, mis razones para esto son porque es incluso más fácil que flex y requiere incluso menos código.

Usar cuadrícula para centrar elementos

Ok, el mismo punto de partida con el cuadro rojo y el elemento interior.

Esta vez haremos de nuestro div un contenedor de cuadrícula con un valor de display de grid . Ahora, lo bueno aquí es que podemos usar las mismas dos propiedades que usamos para nuestro ejemplo de flexbox si queremos. Podemos agregar justify-content: center y align-items: center . Funciona exactamente de la misma manera.

 div { display: grid; justify-content: center; align-items: center; }

Es algo gracioso, pero así es como funciona la cuadrícula, puede usar las mismas propiedades de alineación de caja que usa flexbox. Pero, si lo dejamos así, realmente no habría ninguna ventaja en usar grid, ¿verdad?

Bueno, lo que podemos hacer en su lugar es eliminar estas propiedades de alineación y reemplazarlas con la propiedad place-items. Y podemos darle a esta propiedad un valor de centro.

 div { display: grid; place-items: center; } 

Ahí vamos, ahora lo hemos reducido a solo dos líneas de CSS.

Aquí está el ejemplo de trabajo final usando CSS Grid:

Conclusión

Como dije antes, es mucho más fácil de lo que solía ser, eso es seguro. Pero todas estas técnicas siguen siendo muy relevantes y pueden ser necesarias debido a diversas circunstancias, por lo que es bueno conocerlas todas por si acaso. Definitivamente preferiría la menor cantidad de código CSS grid, y si eso no funciona, la mejor opción es flexbox, y si ninguno de los dos funciona, intente posicionar.