Cómo alinear verticalmente el texto en un div

Cuando se trabaja con un div, a veces es necesario asegurarse de que el texto que contiene esté alineado verticalmente en el medio. Esto se puede lograr mediante varios métodos.

Usar la altura de línea

Si el div tiene una altura fija, como 50 px, simplemente puedes usar la altura de línea Propiedad CSS.

#abc {
  height: 50px;
  line-height: 50px;
}

Esto centrará el texto verticalmente dentro del div.

Uso de propiedades de visualización

Para texto de varias líneas, puede envolverlo en un abarcar elemento y aplicar propiedades de visualización y alineación vertical.

#abc {
  display: table;
  width: 100%;
}

#abc span {
  display: table-cell;
  vertical-align: middle;
}

Usar la propiedad de transformación

Otro método implica usar la propiedad de transformación con la función traducirY(). Esto es especialmente útil para navegadores antiguos que no admiten propiedades de visualización.

#abc {
  position: relative;
}

#abc p {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}