CSSLab

Posicionando un objeto en el centro

Tweet

Aquí mostraré una manera de centrar un objeto (en este caso un imagen, aunq 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