Cómo centrar un elemento verticalmente usando CSS (alineación vertical)

Existen varias formas de alineación vertical. En diferentes situaciones, existen diferentes métodos adecuados. Veamos algunos de ellos.

1. Uso de Flexbox

El método más sencillo y más utilizado:

.container {
  display: flex;
  align-items: center; /* Centers vertically */
  justify-content: center; /* Optional: Centers horizontally */
  height: 100vh; /* Full viewport height, if needed. Or set your own height */
}

2. Uso de Grid

CSS Grid también facilita el centrado vertical:

.container {
  display: grid;
  place-items: center; /* Centers both vertically and horizontally */
  height: 100vh; /* Full viewport height, if needed. Or set your own height */
}

Con Grid también puedes usar align-items: center en lugar de place-items: center

3. Uso de position y transform

Para situaciones en las que Flexbox o Grid no son ideales:

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

Este método centra el elemento en relación con el bloque que lo contiene.

4. Uso de line-height (contenido de una sola línea)

Si está centrando contenido de una sola línea:

.container {
  height: 100px; /* Example height */
  line-height: 100px; /* Match the height */
  text-align: center; /* Optional: Centers horizontally */
}

Esto solo funciona para elementos de texto de una sola línea.

5. Uso de table-cell

Para compatibilidad con navegadores más antiguos:

.container {
  display: table;
  height: 100vh; /* Full viewport height, if needed. Or set your own height */
  width: 100%; /* Optional */
}

.element {
  display: table-cell;
  vertical-align: middle;
  text-align: center; /* Optional: Centers horizontally */
}

¿Qué método utilizar?

• Utilice Flexbox o Grid para diseños modernos.
• Utilice position + transform para escenarios específicos o posicionamiento absoluto.
• Utilice line-height para centrar el texto de una sola línea.