Xyberneticos

¿Qué?. Ahora lo entenderemos todos. Supongamos que necesitamos centran un div o imagen en el centro mismo de la pantalla (por ejemplo el logotipo de una web en la pantalla de presentación para el sitio) y no damos con la solución.CSS Tricks nos la da. Lo más lógico es crear una clase para esa imagen o div que queremos centrar (si es un div tenemos que darle un ancho y un alto fijo), proporcionando un porcentaje superior del 50% e izquierdo de otro 50%:

Pero esto como muchos habrán deducido no nos vale, porque lo que hace es centrar la esquina superior izquierda de la imagen o div en el centro de la pantalla, pero no el centro de la imagen en el centro de la pantalla.

*Imagen de CSS Trick

La solución es simple, añadiremos un margen superior negativo dándole como medida la mitad de la altura que tenga la imagen o div y otro margen izquierdo negativo dándole como medida la mitad de la anchura de la imagen o div:

*Imagen de CSS Trick

¿Solucionado? No, porque IE6 interpreta como le da la gana, así que tendremos que añadir a todo lo anterior un hack en nuestra hoja de estilos:

Ahora sí, ya tenemos la imagen o div centrado en el centro de la pantalla para IE6, IE7 y FireFox.

ACTUALIZACIÓN: Todo lo dicho anteriormente sigue siendo válido pero actualizamos para explicar como eliminar el hack (anieto2k nos lo comentó en los comentarios de esta misma entrada pero se perdieron debido a la mudanza del blog), solo tendremos que cambiar el valor de "position" poniéndolo en "absolute". Así quedaría el código:

Para el segundo ejemplo sería lo mismo, cambiar la propiedad de position por absolute. Con esto evitamos el uso de ningún tipo de hack.

Autoría original del tutorial: CSS Tricks Títuolo original: Quick CSS Trick: How To Center an Object Exactly In The Center

Escrito por redactor invitado: Elías Notario
Blog: diarioTHC