CSS: cómo alinear cualquier cosa en 3 líneas

¿Te estás volviendo loco alineando una capa, una imagen o un párrafo verticalmente con respecto a otra cosa? ¿Tus viejos trucos de aumentar el padding-top son una mierda?

¡Aquí tienes la solución en tan sólo 3 líneas de atributos de CSS:

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

Otra técnica podría ser esta:

/* Mixin */
@mixin vertical-align($position: relative) {
  position: $position;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
 
.element p {
  @include vertical-align();
}

Gracis al bueno de mi compañero «Lucario» por este link.
Fuente en: zerosixthree.se – vertical align anything with just 3 lines of css