Centrar página web horizontalmente con HTML y CSS

Una de las primeras cosas que se aprenden cuando se entra en el mundo del desarrollo web es centrar la página horizontalmente para que, con independencia de la resolución de pantalla con la que entres, siempre quede en medio. Para ello existen varias formas, unas más recomendables que otras dependiendo del proyecto que tengamos entre manos. Vamos a ver tres ejemplos, dos con HTML y otro con CSS.

Centrar capa con HTML

En HTML se pueden utilizar diversos sistemas para centrar, pero los más comunes han sido usar la etiqueta <center> o el atributo align con el valor center.

Sin embargo, estos sistemas presentan dos grandes inconvenientes. El primero es que tanto la etiqueta <center> como el atributo align, centran todo lo que se encuentra en su interior, no sólo la web, también los párrafos, encabezados, imágenes, etc, lo que nos obliga a tener que alinear a la izquierda el contenido. El segundo problema es que desde HTML4 ambos se encuentran obsoletos.

Centrar capa con CSS

La manera más sencilla de centrar una página web con CSS es utilizar una capa como contenedor del portal, darle un ancho y utilizar la propiedad margin con el valor auto. De este modo, tanto el margen derecho como el izquierdo ocuparán el total del espacio a ambos lados haciendo que el contenedor quede centrado.

En mi caso, casi siempre utilizo CSS, pero hay que decir que no son los únicos métodos para centrar una página web, también se puede utilizar JavaScript. Como dije al principio, el uso de cada uno dependerá de las necesidades del proyecto