Centrando en el centro

 

¿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%:

PLAIN TEXT

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:

PLAIN TEXT

CSS:

 

 

1. .centered {

2. position: fixed;

3. top: 50%;

4. left: 50%;

5. margin-top: -50px;

6. margin-left: -100px;

7. }

 

*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:

PLAIN TEXT

CSS:

 

 

1. *html .centered {

2. position:absolute

3. }

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

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

~ por inotony en Noviembre 20, 2007.