Centrar verticalmente en sólo 3 Líneas CSS

by Julio Ruiz | Ene 5, 2015 | CSS, CSS3, Html, Html5, Informática

Es común que muchas de las funcionalidades de CSS o HTML5 aún no hayan evolucionado o mejorado, una de estas es la alineación de contenido o elementos generales en HTML5; otros programadores tendrán su propia técnica o forma de generar la alineación pero siendo sinceros éstas pueden llegar a ser de varias lineas e inclusive repetitivas a lo largo de todo el código.

Para contrarrestar esta técnica sólo se usan tres líneas de código en CSS dónde podremos colocar de manera vertical y alineada todo el contenido en el centro, quedando éste con uniformidad y mejor vista al usuario.

En CSS3 existe la propiedad transform usualmente utilizada para la rotación y escala de elementos, pero si nosotros agregamos la función translateY podemos acomodar los elementos de manera vertical y completamente alineados tal y como se muestra en el siguiente código:

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

Como en todo código de CSS3 podemos generar mixins para no escribir el mismo código una y otra vez, de esta forma sólo mandamos a llamar el mixin y queda con la propiedad de alineación sin más. Ejemplo:

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

.element p {
  @include vertical-align;
}

Ahora que si eres aficionado de Sass puedes usar un placeholder selector para generar la misma reducción de salida en el código:

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

.element p {
  @extend %vertical-align;
}

Lo mejor de todo es que no tienes que preguntarte si funciona en IE9 porque milagrosamente funciona! Déjanos tus comentarios si te ha funcionado más o mejor que la propia técnica que usas y la experiencia que tuviste al ponerlo en práctica.

Como algunas personas han señalado, este método puede causar que algunos elementos se vean borrosos debido a que este es colocado en un “medio píxel“. Una solución para esto es fijar un elemento padre para preserve–3d.  Como se ve a continuación:

.parent-element {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

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

Saludos 😀

Fuente: zerosixthree