13 formas de centrar vertical

En los viejos tiempos, los límites de CSS eran tales que incluso las cosas» simples » como el centrado vertical planteaban un desafío, y algunos de nosotros incluso dependíamos de soluciones de JavaScript. Era frágil, estaba muy limitado, y siempre había una excepción que lo hacía fracasar.

Ya sea que intentáramos alinear un icono o una imagen al lado del texto, crear uno de esos populares banners de «héroes» o una superposición modal, centrar las cosas en el eje vertical siempre fue una lucha.

Pero CSS ha recorrido un largo camino desde entonces, proporcionando muchos métodos que facilitaron el centrado vertical cada vez. Aquí hay un resumen de algunos de ellos, junto con sus casos de uso y limitaciones.

Posicionamiento absoluto y margen automático

Un elemento sin tamaño intrínseco se puede «centrar» simplemente utilizando valores iguales de la parte superior e inferior. Cuando el elemento tiene dimensiones intrínsecas, podríamos usar 0 para la parte superior e inferior, luego aplicar margen automático. Esto automágicamente centro del elemento:

.container{ position:relative;}.element{ position:absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; height: 20px; /*requires explicit height*/}

Ver el Lápiz
de Centrado 1: posicionamiento absoluto de Facundo Corradini (@facundocorradini) en CodePen.

La limitación es, por supuesto, que la altura del elemento debe declararse explícitamente, o ocupará todo el contenedor.

El clásico top 50% translate -50%

Este es uno de los primeros, y sigue siendo una opción para muchos desarrolladores. Un truco simple, basado en el posicionamiento absoluto del elemento interno al 50% desde la parte superior de su padre, y luego traducirlo al 50% de su altura:

.container{ position: relative;}.element{ position: absolute; top: 50%; transform: translateY(-50%);}

Ver el bolígrafo
Centrado 2: top 50 translateY -50 de Facundo Corradini (@facundocorradini) en CodePen.

Un enfoque bastante sólido, con la única limitación importante es el uso de la traducción que podría interferir con otras transformaciones, por ejemplo, al aplicar transiciones / animaciones.Tablas

. Sí, acabo de decir mesas.

Un enfoque realmente simple y uno de los primeros (en su día, todo era tablas), es usar el comportamiento de las celdas de la tabla y la alineación vertical para centrar un elemento en el contenedor.

Esto se puede hacer con tablas reales (vergüenza, vergüenza, vergüenza), o usando HTML semántico, cambiando la visualización del elemento a celda de tabla:

.container{ display: table; height: 100%;}.element{ display: table-cell; text-align: center; vertical-align: middle;}

Ver el Lápiz
Centrado 3: tablas de Facundo Corradini (@facundocorradini)
en CodePen.

Esto funciona incluso cuando ambos elementos son de altura desconocida. La principal limitación es, por supuesto, si necesita tener un hermano no centrado, y puede ser complicado con los límites de fondo.

Además, tenga en cuenta que esto falla totalmente en los lectores de pantalla (incluso si su marcado se basa en divs, configurar la pantalla CSS en tabla y celda de tabla hará que los lectores de pantalla la interpreten como una tabla real). Lejos de ser el mejor cuando se trata de accesibilidad.

El método de elemento fantasma

Otro elemento antiguo, que no se puso al día por cualquier motivo, está utilizando un bloque en línea con un elemento fantasma (pseudo) que tiene una altura del 100% del elemento principal, y luego establece la propiedad alineación vertical en medio:

.container::before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-left: -1ch;}.element{ display: inline-block; vertical-align: middle;}

Ver el Lápiz
Centrado 4: método de elemento fantasma por Facundo Corradini (@facundocorradini) en CodePen.

En realidad funciona bastante bien, con el «gotcha» más notable es que mueve el centro horizontal solo un poquito a la derecha, debido al comportamiento siempre arrugado de los espacios en blanco entre los elementos de bloque en línea.

Esto se puede tratar como lo haríamos con el problema del bloque en línea en cualquier otro contexto, el enfoque más simple es el margen-izquierda-1ch que utilicé anteriormente (aunque esto no será 100% preciso excepto en fuentes monoespaciadas, ya que la unidad ch significa el ancho del carácter «0»), o establecer el tamaño de fuente en 0 en el contenedor y luego restablecerlo a px o rem en el elemento. No es óptimo, por decir al menos.

Margen automático en un elemento flexible

Finalmente, entrando en el territorio CSS moderno, flexbox introdujo un comportamiento bastante impresionante para los márgenes automáticos. Ahora, no solo centrará horizontalmente el elemento como lo hizo en los diseños de bloques, sino que también lo centrará en el eje vertical:

.container{ display:flex;}.element{ margin:auto;}

Vea el Lápiz
Centrado 5: margen:automático en un elemento flexible de Facundo Corradini (@facundocorradini)
en CodePen.

Esta táctica es una de mis favoritas debido a su simplicidad, la única limitación importante es que solo funcionará con un solo elemento.

Pseudo-elementos en un contenedor flexible

No es el enfoque más práctico del mundo, pero también podemos usar pseudo elementos flexibles y vacíos para empujar el elemento al centro:

.container{ display:flex;}.element{ margin:auto;}

Ver el bolígrafo
Centrado 6: pseudos en un flexbox de Facundo Corradini (@facundocorradini) en CodePen.

Esto puede ser útil cuando queremos mantener un espacio flexible en un contenedor flexible orientado a columnas con varios elementos.

7 & 8. Alinear en el contenedor flexible o en el elemento flexible

Flexbox también introdujo propiedades de alineación realmente excelentes (que ahora se bifurcan en su propio módulo de alineación de cajas). Esto nos permite controlar cómo se colocan los elementos y cómo se distribuye el espacio vacío de formas que habrían requerido números mágicos en CSS para un número específico de elementos (o un JS bastante inteligente para cantidades dinámicas).

Dependiendo de la dirección de flexión, podemos usar justify-content o align-items para ajustar según sea necesario.

En el contenedor:

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

Ver el bolígrafo
Centrado 7: alinear en contenedor flexible por Facundo Corradini (@facundocorradini)
en CodePen.

En un elemento flexible en particular:

.container{ display: flex;}.element{ align-self: center; margin: 0 auto;}

Ver el bolígrafo
Centrado 8: alinear en el elemento flexible de Facundo Corradini (@facundocorradini)
en CodePen.

No hay muchos inconvenientes en esto, excepto si necesita admitir navegadores más antiguos. IE 11 debería funcionar, pero su implementación de flexbox es bastante defectuosa, por lo que siempre debe tratarse con cuidado extra. IE 10 requiere trabajo adicional, ya que se basa en un borrador anterior de la especificación que tiene una sintaxis diferente y requiere el prefijo de proveedor-ms.

9 & 10. Alinear en el contenedor de cuadrícula o el elemento de cuadrícula

CSS Grid incluye prácticamente las mismas opciones de alineación que flexbox, por lo que podemos usarlo en el contenedor de cuadrícula:

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

Ver el bolígrafo
Centrado 9: alinear en el contenedor de cuadrícula por Facundo Corradini (@facundocorradini)
en CodePen.

O simplemente en un elemento de cuadrícula específico:

.container{ display: grid;}.element{ justify-self: center; align-self: center}

La única limitación de esta técnica es la falta de compatibilidad con navegadores antiguos.

Ver el Bolígrafo
Centrado 10: alinear en cuadrícula-elemento de Facundo Corradini (@facundocorradini)
en CodePen.

Pseudo-elementos en una cuadrícula

De manera similar a la alternativa de flexbox, podríamos usar una cuadrícula de tres filas con pseudo-elementos:

.container{ display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(3, 1fr);}.container::before,.container::after{ content:"";}

Recuerde que 1fr en realidad significa minmax(auto, 1fr), por lo que las filas vacías no necesariamente ocuparán un tercio de la altura del contenedor. Se colapsarán según sea necesario hasta su valor mínimo de auto, y sin contenido, significa 0.

Ver el Bolígrafo Centrado 11: grid + pseudos de Facundo Corradini (@facundocorradini)
en CodePen.

Esto puede parecer un enfoque tonto, pero nos permite realizar fácilmente uno de mis trucos favoritos de cuadrícula CSS: combinar filas fr con filas minmax, lo que hará que las filas fr vacías se colapsen primero, luego las mixmax. Jenn Simmons tiene grandes ejemplos al respecto.

Por lo tanto, hacer que los pseudónimos tomen las filas completamente plegables permitirá que el algoritmo de colocación automática haga su magia en nuestros elementos reales. Excepto si necesitamos apoyar IE, que carece de auto-colocación. Lo que nos lleva al siguiente método

Colocación explícita de filas de cuadrícula

CSS grid permite que los elementos se coloquen explícitamente en una fila específica, por lo que la misma declaración de cuadrícula que la anterior y el elemento colocado en la segunda fila serán suficientes:

.container{ display:grid; grid-template-columns:1fr; grid-template-rows: repeat(3, 1fr);}.element{ grid-row: 2 / span 1; /* or grid-row: 2/3 */}

Este puede funcionar hasta IE10. Lo creas o no, IE fue uno de los primeros y más fuertes partidarios de CSS grid, enviándolo todo el camino de vuelta en 2011 con IE10. Se basa en un borrador muy temprano que tiene una sintaxis completamente diferente, pero podemos hacer que funcione:

.container{ display: -ms-grid; -ms-grid-rows: (1fr); -ms-grid-columns: 1fr;}.element{ -ms-grid-column: 1; -ms-grid-row: 2;}

Ver el Bolígrafo
Centrado 12 : colocación explícita en una cuadrícula por Facundo Corradini (@facundocorradini)
en CodePen.

Margen automático en un elemento de cuadrícula

De forma similar a flexbox, la aplicación margen automático en un elemento de cuadrícula lo centra en ambos ejes.

.container{ display: grid;}.element{ margin: auto;}

Ver el bolígrafo Centrado 12 : colocación explícita en una cuadrícula por Facundo Corradini (@facundocorradini)
en CodePen.

Algunas implementaciones futuras (probables)

De acuerdo con la especificación de nivel 3 del Módulo de Alineación de cajas CSS, align-content debería funcionar en el eje de bloques de contenedores de bloques y contenedores multicol, por lo que (si los navegadores lo implementan) deberíamos poder centrar el contenido de esos contenedores al igual que lo hacemos en contenedores flexibles o de cuadrícula.

Conclusión