regla1

La resolución más baja que existe ahora es la de 1024 x 768, así que deberemos programar de acuerdo a esta resolución como mínimo. Una de las cosas que debemos hacer siempre que sea posible, es crear la estructura de nuestro sitio de forma fixed, es decir, que sea una anchura y altura determinada, y que no varíe respecto a otras resoluciones (se haga más ancho, más alto…).

Una manera de centrar la estructura de tu contenido en CSS en Firefox, sería esta, primero indicamos el código HTML. En nuestro caso hemos decidido poner todo el código HTML al completo (Abajo se detallan las instrucciones para centrar en Internet Explorer):

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>Mi sitio</title>
</head>
<body>
<div id="wrap">

        <!-- El contenido del sitio web va aquí --></div>
</body>
</html>

El código CSS debería ser así:

#wrap         { width:900px; margin:0 auto; } /* "auto" hace que el
margen de la izquierda y la derecha centre la estructura del contenido */

¡Eso es todo! Con esto simplemente ya tendremos la estructura de nuestro sitio centrada horizontalmente, con el uso de CSS.

Si queremos centrar la estructura en Internet Explorer, debemos aplicar estos cambios:

Debemos aplicar un text-align:center y un width:100% al body, que quedaría así en nuestro código CSS:

body {
text-align: center;
width:100%;
}

Y el div debe tener text-align hacia donde queramos que se alinie el texto en el div, en nuestro caso lo colocaremos centrado, quedaría así:

#wrap         { width:900px; margin:0 auto; text-align: center;}

Listo, ya tendremos la estructura centrada en Internet Explorer.

Vía: DavidWalsh