Laburo España: 250.000 ofertas de empleo

CSS: Centrar horizontal y verticalmente un elemento

Archivado en CSS • Fecha: 02-03-2005 13:08:55

Quizá centrar vertical y horizontalmente una imagen, flash, tabla o DIV en una página pueda parecer trivial para algunos, pero he comprobado en los foros que mucha gente tiene el mismo problema: Es sencillo centrar horizontalmente, pero complicado hacerlo verticalmente.

Dejo aquí una manera sencilla de hacerlo, utilizando un estilo CSS y un tag DIV:

Ejemplo: Queremos centrar en la página un elemento de 760 px de ancho por 420 px de alto.

Estilo CSS:
Creamos un estilo y lo nombramos container

#container {
     position:absolute;
     width: 760px;
     top: 50%;
     margin-top: -210px;
     left: 50%;
     margin-left: -380px;
     }


Como veis, el margin-top (en negativo) corresponde a la mitad de la altura del elemento y el margin-left a la mitad de la anchura.

Después, en la página, entre los tags <body>, basta con crear un elemento DIV:

<div id="container>
    aquí se coloca el objeto a centrar, imagen, flash, tabla o caja de texto
</div>


Y eso es todo.. Funciona en Firefox e IE.
Y sin usar tablas :P

Escrito por daTo
(7) Comentarios • (0) Referencias • Permalink


Referencias (URL para referencias)


Comentarios

  1. Gracias, es la explicacion mas completa que he encontrado, pero hasta el momento no he podido aplicarlo, le agradeceria si me ayudase hace mucho que estudie esto y cuando lo hice no existia, lo poco que se es por lo que he aprnedido de gente como usted.

    Aqui vera que lo que quiero centrar una tabla con comandos CSS en html: www.caucasia.tk

    Agradezco de antemano su ayuda.

    Gracias!!!

    Lewis Spinal — 15-12-2005 00:10:53

  2. Hola, gracias antes de nada, pero he probado tu consejo para centrar un flash y en firefox sale perfectamente, pero en IE6 se queda centrado horiz pero medio flash se queda cortado en la parte superior.

    Darío Vigil — 15-12-2005 21:49:11

  3. Has tenido en cuenta el signo negativo y el tamaño (vertical) de tu flash ???

    Mira http://www.agrupacioplastica.com , en este sitio he usado lo que comento aquí y a mí sí que se me ve bien en todos los navegadores.

    ya me diras algo, un saludo

    daTo — 16-12-2005 20:07:46

  4. perfecto. Muchas gracias.
    Al principio no me funcionó porque, s ni me equivoco, en el css faltaba agregar el valor del alto del elemento (420 px en el ejemplo).

    andres — 01-01-2006 22:39:34

  5. La verdad es la primera explicacion que encuentro realmente util. Ideal para cuando uno esta migrando de diseñar en tablas.
    Felicitaciones

    simar — 15-01-2006 22:12:59

  6. He probado este método para centrar y me funciona perfectamente en IE, pero en FireFox solamente se centra horizontalmente ¿Tendrás alguna idea de por qué?

    Gracias de antemano.

    Carlos Sánchez — 08-02-2006 18:34:22

  7. Carlos, mira tu correo

    daTo — 10-02-2006 09:41:54


Comentar



Recordar datos