#GeekStuff: Alinear verticalmente cualquier elemento usando solamente 3 líneas de CSS

Con solamente 3 líneas de CSS es posible alinear verticalmente cualquier elemento que queramos con la ayuda de transform: translateY, aún así no tengamos idea de su altura.

La propiedad transform es comúnmente usada para rotar y escalar elementos, pero con su función translateY ahora podemos alinear verticalmente cualquier elemento. Antes era necesario conocer la altura del elemento para ya sea posicionarlo absolutamente dentro de su contenedor o asignándole line-height.

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

Eso es todo lo que hay que hacer (¿qué hermoso?). Es una técnica similar al método de posicionar absolutamente las cosas (lo cual odio hacer), pero con la ventajota de que no tenemos que especificar la altura del elemento en cuestión y la posición es calculada automáticamente. Ahh, casi olvido mencionar que también funciona en IE9. 😉

También podemos usar el selector placeholder en Sass y también de una vez agregamos los prefijos correspondientes para asegurar un buen cross browsing:

  
    %alineado-vertical {
      position: relative;
      top: 50%;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
    }

    .elemento p {
      @extend %alineado-vertical;
    }
  

Es importante señalar que para evitar problemas en la manera en la que se renderiza el elemento que vamos a alinear, agreguemos las siguientes propiedades al contenedor padre:

  
    .contenedor-elemento {
      -webkit-transform-style: preserve-3d;
      -moz-transform-style: preserve-3d;
      transform-style: preserve-3d;
    }

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

Espero les sea de utilidad. 🙂