DKs Blog

Amigos este post lo saque del blog de Xyberneticos y realmente me encuentro muy agradecido!! lo pongo en mi blog, porque temas tan buenos como este deberían de tenerlos mas blogs jejej con permiso y lo pongo espero les ayude!

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

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

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

*html .centered {
position:absolute
}

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

Así quedaría el código:

.centered {
position: absolute;
top: 50%;
left: 50%;
}

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

tomado de: http://xyberneticos.com/index.php/2007/11/14/centrando-en-el-centro/