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

alineado-vertical

¿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

Autor: Janmi

Janmi es un informático entusiasta de la ciencia ficción, el diseño gráfico, el universo de Tolkien, fantasía épica y otras cosas frikis. Apasionado por la tecnología, ya sea desde el punto de visto técnico, domótico, funcional o de diseño.