El desarrollo front-end es algo maravilloso, y cada día que pasa, se vuelve mucho más mágico. Hoy en día contamos con tantos conceptos, metodologías, buenas prácticas y demás cosas para hacer nuestro trabajo, que cada vez es más fácil hacer prácticas más asombrosas. Javascript (junto con sus innumerables librerías de terceros) y CSS han crecido tanto, ayudando a crear elementos que ni siquiera hace un par de años se consideraban como posibles. Pero hay una cosa que a menudo no sale a la luz en el diseño web. Una particularidad que casi siempre pasamos por alto. Una maldición que todos los que sabemos algo sobre desarrollo front-end hemos sufrido. Sí, amigos, estamos hablando del centrado vertical, una particularidad que los desarrolladores estamos pidiendo a gritos. Cada vez que intentamos centrar algo verticalmente, solemos pasarlas canutas.
Ahora hay muchas maneras de hacer frente a este problema: el método de la tabla, el método de la altura y media, el método insertar-otro-elemento-barra-pseudo-elemento-con-vertical-align-y-height-100%, el método de calcular en la carga... y mucho más. Cada uno de ellos es más chapuza que el anterior, y además se pone aún más complicado cuando no conocemos la altura (ya sea tanto del padre como del hijo). Por no nombrar lo difícil que es esto cuando trabajamos con diseños responsive.
Desde hace mucho tiempo, para lograr el centrado vertical era muy fan del método de "calcular en la carga". La premisa es simple: obtener la altura de los padres, restar la altura de los elementos hijos, se divide entre dos y agregamos el valor resultante al top en píxeles. Resumiendo, el 50% de la altura del elemento padre menos el 50% de la altura del elemento hijo, ¿entendido? Aquí tenéis una representación visual de lo que os estoy tratando explicar:
Sí, se lo que estáis pensando: ¡Hacer inline en CSS es malo!, pero esta, para mi, es la solución menos mala de las que conozco. No hacía falta cambiar ningún elemento de la caja modelo, perder tus pseudo-elementos, introducir otro elemento por aportar una solución, ni ninguna otra chapuza. Pero como he dicho antes, las cosas se ponen aún más dificiles cuando no conocemos las dimensiones del elemento.
Claro, puedes llevar a cabo esto mediante el uso de un script el cual se ejecuta después de que se haya cargado la ventana, o cuando la ventana/objeto haya cambiado de tamaño, y luego recalcular las posiciones. Pero, ¿que tendríamos que hacer si contamos con cientos de elementos, cada uno recibiendo la información para adaptarse al marco padre? El script consumirá muchísimos recursos. Y lo más importante, ¿por qué complicar tanto las cosas cuando existe una solución simple en puro CSS?
Ejemplo HTML
Este sería el HTML base del centrado:
<div class="parent">
<div class="children">Estoy centrado verticalmente</div>
</div>
Esto es un caso común: un padre con hijos que desean ser centrados verticalmente.
CSS3 Transforms
Una cosa muy interesante sobre los CSS3 Transform es que, cuando se aplica con valores porcentuales, basan su valor sobre las dimensiones del elemento que ha sido implementado, a diferencia de propiedades como top, right, bottom, left, margin y padding, que se basan en las dimensiones de los elementos padres (o en caso de posicionamiento absoluto, que utiliza el elemento padre más cercano)
Sabiendo esto, podríamos aplicar el mismo método de "cálculo en la carga" que hemos visto antes, pero ahora adaptándola a CSS. En primer lugar, movemos el elemento en cuestión abajo hacia la mitad de su padre utilizando top:50%, después lo arrastramos por medio de dicho elemento con transform: translateY(-50%). Por supuesto, el elemento debe tener posición relativa, absoluta o fija. Si miramos hacia la imagen que hemos puesto más arriba, esto es exáctamente lo que hemos logrado.
.children{
background: #ffdb4c;
height: 300px;
position: relative;
top: 50%;
transform: translateY(-50%);
}
Como estamos usando porcentajes, estos elementos se centrarán verticalmente sin importar lo alto que sean sus padres. Por último, unas advertencias: si deseas centrar un elemento posicionado relativamente, su padre debe tener un valor de altura, es decir, no va a funcionar si la altura de dicho padre se ha establecido automáticamente. Y por supuesto, como la mayoría de las características y propiedades de CSS3, las transforms no funcionan en IE8 y versiones anteriores.