Posicionando un objeto en el centro

7/nov/2005 13

Aquí mostraré una manera de centrar un objeto (en este caso un imagen, aunque puede ser un div) en el centro del navegador utilizando CSS.

Insertando una imagen :

Inserte una imagen y agréguele un ID (en este caso, "centro")

 <img src="imagen_centrar.jpg" id="centro" /> 

Defina el tamaño del objeto:

En el CSS, defina las dimensiones del objeto (img o un div). En este caso, el ancho y alto son de 150px.

#centro {
   width: 150px;
   height: 150px;
}

Momento de alinear:

Llegó el momento de posicionar el objeto dentro de la pantalla. Aquí es donde está la clave. Se debe definir una posición absoluta, con un 50% del alto (top) y 50% de la izquierda (left), quedando en el medio. Un punto importante a saber, es que el CSS no usa el centro del objeto como referencia de posicionamiento, sino sus extremidades, por lo que lo que quedará centrado aquí será el extremo izquierdo superior del objeto (img).

#centro {
   width: 150px;
   height: 150px;
   position: absolute;
   top: 50%;
   left: 50%;
} 

Para finalizar:

Para lidar con este pequeño detalle, el que se notará bastante cuando una imagen (o div) es grande y quede corrida, se resta del margen superior e izquierdo (margin-top y margin-left) la mitad del tamaño de la imagen (en este caso, 75 px) para que así quede en el centro de la imagen el punto cero.

 #centro {
   width: 150px;
   height: 150px;
   position: absolute;
   top: 50%;
   left: 50%;
   margin-top: -75px;
   margin-left: -75px;
} 

Ver resultado final

Comentarios

  1. Juglar :: Centrar :: August :: 2005 [#]

    […] CSS Lab » Posicionando un objeto en el centro Vertically and Horizontally Centering a DIV Menéame « Anterior: CSS Layouts Siguiente: Efectos con imágenes y CSS» […]

  2. Carlos [#]

    thanks

  3. world wide travel insurance [#]

    world wide travel insurance…

    Deneen!musts raked darkest …

  4. » Pronto… | CSSLab [#]

    […] Posicionando un objeto en el centro […]

  5. a_guy [#]

    zelente aporte, muchas gracias 😉

  6. alberto [#]

    gracias mil; hay pequeños detalles que aunque parecen simples a veces te lían.

    saludos

  7. Jogo [#]

    gracias…

  8. Julio [#]

    Hola,

    ¿ Sabes si se puede centrar una imagen de fondo con css ?, es decir algo como:

    background-image : url( loquesea );
    background-position : ???

    Gracias y un saludo

  9. Jorge Epuñan [#]

    Julio: claro que si:

    background-repeat: center center;

    (el primer valor es para el eje horizontal y el segundo para el eje vertical). Mas info en W3Schools.

  10. omardiaze [#]

    muy bien logrado, gracias!

  11. jomohop [#]

    muy bien :)

  12. Edna [#]

    Muchas gracias por tu ayuda :D!! me salvaste :3

  13. Daniel Antonio Sánchez [#]

    No me funcionoooooo :(

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab