Aprende a optimizar tus blogs para que sean los primeros en las busquedas

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?

Centrar verticalmente con html y css

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

1 Comentario
junio 5, 2013
ad

RT @morepagerank: Centrar verticalmente una imagen con CSS por @miniunis : http://t.co/R6U97GO7Tz via @morepagerank

Escribir un comentario