Centrar un Elemento Horizontal y Verticalmente con CSS

Sabemos que es muy sencillo centrar verticalmente una imagen, o incluso toda la nuestra página, en el browser, haciendo uso de margin:0 auto; ¿pero qué pasa si nuestro site es una película flash o queremos colocar una imagen anunciando mantenimiento o la fecha de inauguración de nuestro site y queremos que esté centrado horizontal y verticalmente?

Bien, este es un sencillo tip que nos permitirá hacerlo sin importar el tamaño del navegador, pero con una salvedad, sólo funciona con elementos de tamaño fijo. Dicho esto, comencemos.

Lo primero que haremos es insertar el elemento que queremos centrar, una imagen por ejemplo, y colocarle un identificador.

<img src="img/central.jpg" id="central" height=200px width=200px/>

Hecho esto, colocamos en nuestro css:


#central{
position:absolute;
top:50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}

¡Y eso es todo! Expliquemos el código:
position:absolute;
Al colocar la propiedad position en “absolute” hacemos que se rija por las coordenadas absolutas de la página, sin importar si se encuentra o no en algún contenedor.


top:50%;
left:50%;

Empuja nuestro elemento colocando su esquina superior izquierda en el centro de la página.


margin-top: -100px;
margin-left: -100px;

Colocamos un margen negativo al tope (la mitad del alto) y a la izquierda (la mitad del ancho), para colocarlo al centro del elemento. ¡Y ya!

Espero que les sea útil. Un tip sencillo pero con un resultado elegante.


One thought on “Centrar un Elemento Horizontal y Verticalmente con CSS

  1. Centrar un elemento es tan facil como lo que ha puesto el creador de este blog
    eso si, desde un archivo externo css definido en la cabezera del documento.

    jaja Me encanta las opciones que dan las hojas en cascada

Deja un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s