Normalmente realizo mis diseños con un ancho máximo de unos 780 píxeles, para que se vean completamente en una pantalla a 800×600. Como casi todos van centrados, utilizo una capa que contiene toda la página, del ancho adecuado, que centro en la hoja de estilo.
Hasta hoy utilizaba el siguiente código:
#centro {
position:absolute;
width:770px;
left: 50%;
margin-left: -385px;
}
Y si quería que se mostrara también centrada verticalmente, sólo había que poner top: 50%, y como margin-top la mitad de la altura de la capa (en valor negativo).
Este sistema funciona perfectamente en cualquier navegador, pero tiene un problema, y es que el Dreamweaver MX, en vista Diseño, lo muestra incorrectamente y no puedes editar la mitad izquierda de la página (el MX 2004 si muestra bien). Dado que en trabajo utilizamos esa versión, y mis compañeros suelen utilizar la vista diseño, es un poco coñazo para ellos cuando les paso un diseño centrado de esta manera.
Hoy leo en Simplebits otra forma de hacer que la página quede centrada. Más sencilla, y que el Dreamweaver MX muestra correctamente:
body {
text-align: center;
}
#centro {
margin: 0 auto;
width: 770 px;
text-align: left;
}
¿Más simple no? Lo que no he podido ha sido centrar verticalmente también con este sistema, pero esto lo uso muy pocas veces.
Analizando como funciona, en principio lo único que necesitamos es el margin: 0 auto, que intenta dejar sin margen a ambos lados, y claro como no puede lo deja en el centro. El width es obvio, y en cuanto al text-align, el que está en el body sirve para que funcione con IE5. Luego lo alineamos a la izquierda para que no se nos quede todo centrado dentro de la capa.