¿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%:
CSS:
.centered {
position: fixed;
top: 50%;
left: 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:
CSS:
.centered {
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
}
*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:
CSS:
*html .centered {
position:absolute
}
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:
CSS:
.centered {
position: absolute;
top: 50%;
left: 50%;
}
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
