Todo el mundo sabe centrar una imagen, un texto o cualquier cosa en una linea de la pantalla (horizontalmente), pero ¿Cómo podemos centrar verticalmente un objeto haciendo que quede, por ejemplo, en el centro exacto de la pantalla?
Pues existe un pequeño truco con css, usando position absolute, que nos permitirá centrar las cosas exactamente en el centro de la pantalla, tenga el tamaño que tenga, también podremos dejar objetos en un lado de la pantalla pero centrado verticalmente.
<style>
.center{
margin: auto;
position: absolute;
top: 0px;
bottom: 0px;
left: 0px; /*Sin esta línea (pero con todas las demás),
el elemento se pegará al lado izquierdo*/
right: 0px; /*Sin esta línea (pero con todas las demás),
el elemento se pegará al lado derecho*/
}
</style>
<img src="imagen.png" class="center">
Y solo con esto conseguiremos hacer la magia, ya que si cambias el tamaño de la página, la imagen se autocentrara adaptativamente =)
Espero que os haya sido útil para cuando queráis centrar algo verticalmente, ya sabeis como hacerlo y no tendreis que desesperar porque la imagen o el texto no se centra como se debería centrar.
Nota:Esto, obviamente, no funciona en IE6
