Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
Centrar un elemento horizontal y verticalmente con CSS
#1
Sabemos que es muy sencillo centrar verticalmente una imagen, o incluso toda la nuestra página, en el navegador, haciendo uso de margin:0 auto (si no sabes de qué estamos hablando es mejor que veas antes este tutorial; ¿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.

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

Hecho esto, colocamos en nuestro css:

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

¡Y eso es todo! Expliquemos el código:

Cita: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.

Cita:top:50%;
left:50%;
Empuja nuestro elemento colocando su esquina superior izquierda en el centro de la página.
Cita: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.


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  Como hacer un menu horizontal con html5 y css3 torgar22 4 587 16-12-2014, 02:07 PM
Último mensaje: Demozz
  Menú horizontal con buscador expandible imgur 2 316 04-12-2014, 09:08 PM
Último mensaje: imgur
  Centrar imagenes con css rubenpl 2 449 18-01-2014, 06:56 PM
Último mensaje: JsAlexM
  Crear un menú horizontal simple con CSS DjSonic 10 2,058 25-05-2012, 06:26 PM
Último mensaje: shackur
  Insertar elemento en un array con C# mandragon 1 4,592 15-03-2012, 09:22 AM
Último mensaje: ciberutilidades



Usuarios navegando en este tema: 1 invitado(s)