rubensarrio | blog de diseño web, diseño grafico y algo más

Dado que estos días voy a estar maquetando una web, he pensado en ir publicando una serie de tutoriales sobre distintas técnica básicas de CSS a las que probablemente recurramos en muchos diseños web. En la primera de ellas nuestro objetivo será centrar el contenido de una página par que cuando se redimensione la ventana del navegador, el contenido se mantenga centrado.

Existen distintos métodos para centrar una página usando CSS, en aquí voy a explicar las dos técnicas más utilizadas y con mayor compatibilidad entre navegadores. En ambas partiremos de un documento html básico que dispondrá de un elemento div padre del resto de elementos, al que por ejemplo vamos a identificar como #contenedor.

Centrar usando márgenes automáticos

Una manera rápida y limpia de centrar la página seria poniendo los márgenes derecho e izquierdo en modo automático, así el navegador se ocuparía de calcular los márgenes del contenido con respecto a su tamaño y el de la ventana con el resultado de centrar la página. Evidentemente para que esto funcione necesitamos un contenedor que tenga una anchura definida.

#contenedor {
width: 600px;
margin-left: auto;
margin-right: auto;
}

Además podemos reducir un poco de código combinado los márgenes en usa sola línea: margin: 0 auto. Sin embargo este método está lejos de ser perfecto ya que no funcionará en IE5 y IE6 sólo funcionara en modo estándares. Pero no lo descartemos todavía ya que tenemos una fácil solución, consiste en darle al body la propiedad text-align: center, mientras que al resto de elementos que contenga la mantendremos por defecto con text-align: left.

body { text-align: center; }
body * { text-align: left; }
#contenedor {
width: 600px;
margin: 0 auto;
}

Un ejemplo de ésta técnica.

Centrar usando márgenes negativos

Otra técnica más ingeniosa y compatible con los navegadores más antiguos (como por ejemplo Netscape 4) consiste en poner el contenedor en modo posición absoluta y jugar con su margen izquierdo dándole un valor negativo.

#contenedor {
position: absolute;
left: 50%
width: 600px;
margin-left: -300px;
}

Como vemos en el código, una vez en modo posición absoluta, movemos el contenedor desde el borde izquierdo con left: 50%, colocándolo en la mitad de la página. Ahora solo falta añadirle un margen negativo que sea justo la mitad del ancho del contenedor y ya tendremos nuestra página centrada.

Un ejemplo de ésta técnica.

Que técnica elegir puede depender de la estructura de la página o de nuestros gustos personales, lo que si podemos decir es que las probabilidades de que un navegador no compatible con cualquiera de ellas visite nuestra web son extremadamente bajas.