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.
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.
Código :
top:50%;
left:50%;
Empuja nuestro elemento colocando su esquina superior izquierda en el centro de la página.
Código :
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.
Solo aclarar que para que este tip funcione el elemento a centrar tiene que que tener un width y height como lo de pusistes en la etiqueta img height=200px width=200px, de lo contrario no funcionara, saludos Por:fearlex_blog
fearlex_blog :
Solo aclarar que para que este tip funcione el elemento a centrar tiene que que tener un width y height como lo de pusistes en la etiqueta img height=200px width=200px, de lo contrario no funcionara, saludos
Las medidas son sólo de ejemplo, lo único necesario es que el elemento sea de un tamaño fijo. Por eso puse al final que los márgenes izquierdo y superior son de la mitad del ancho y del alto respectivamente. Si tu elemento es de 300 * 100, colocarás en los márgenes 150 y 50 respectivamente y funciona igual. Por:The Fricky!
muy bueno, si usaba position absolute para fijar al 100% mi swf en el navegador, pero ahora con DW cs3 ya no es necesario para swf.
buen tip Por:paberu_blog
Muy Interesante seguro lo aplicare en mis proyectos Gracias Por:Luis Ulloa_blog
Si bien, no creo que venga al caso, para poder centrar horizontalmente un objeto sin importar el ancho que tenga, podemos usar
margin-left:auto; margin-right:auto;
Esto debido a que al poner un margen negativo las barras de scroll no se mostraran adecuadamente. Por:crystalsys_blog
No se si lo has obtenido de algun lado, pero mis felicitaciones van hacia ti... Tip inteligente Se me hubieran ocurrido mil y un cosas pero nunca esto...
esta muy bien la logica, pero tuve problemas cuando el alto sobrepasa el alto del navegador, si no se entiende prueben dandole un height de 800px y margin-top: -400px Por:matias-blog
Sos un groso, me diste la solucion exacta para centrar un gif dentro de un lightbox. Saludos capo!!!! Por:chekeron-blog
Como lo puedo hacer para centrar una palabra en un cuadro de 85px por 35px, de forma horizontal y vertical, el largo lo centro pero el ancho no me resulta. Saludos Por:yop-blog
ya lo hice Por:yop-blog
Macho, genial idea, me ha salvado la vida para una web que llevo entre manos y además lo usaré en otras ocasiones.
¡Muchas gracias! Por:Joaquin-blog
funciona con cualquier elemento y a cualquier distancia solo con modificar un poco el codigo Por:vell-blog
