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 cuatro ejemplos, dos con HTML y otros dos con CSS.

Centrar web con HTML (desaconsejado)

Hay varios modos de centrar una web solo con HTML, pero los métodos más comunes han sido siempre usar la etiqueta <center> o el atributo align con el valor center.

<center>
    <div>
        Aquí iría toda la página web, por ejemplo.
    </div>
</center>

<div align="center">
    Aquí iría toda la página web.
</div>

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 web con CSS: margin

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

<div class="contenedor">
    Aquí iría toda la página web.
</div>

.contenedor{
    width:960px;
    margin:auto;
}

Este es el método que actualmente más utilizo ya que funciona perfectamente, sin embargo veremos a continuación uno más que es muy interesante y recomiendo darle un vistazo.

Centrar web con CSS: flexbox

Otro método un poco más complejo de entender al principio es hacer uso del sistema flexbox de CSS, si bien una vez se domina facilita el trabajo de maquetación mucho. En este caso debemos crear un contenedor dentro del body que hará de padre de la web (de nuevo usaré un div con la clase «contenedor»), al cual asignaremos la propiedad display con el valor flex y después añadiremos la propiedad justify-content con el valor center. El bloque con la web que añadamos en su interior se centrará horizontalmente.

<div class="contenedor">
    <div>
        Aquí iría toda la página web.
    </div>
</div>

.contenedor{
    display:flex;
    justify-content:center;
}

La pega que podemos encontrarnos al usar flexbox es que no todos los navegadores lo soportan en este momento, aunque es de esperar que en unos años esté totalmente aceptado.

Actualmente os recomiendo centrar solo con CSS, ya que como comentaba al principio hacerlo usando HTML está obsoleto y aunque los navegadores seguirán ofreciendo retrocompatibilidad durante bastantes años, debemos seguir las buenas prácticas de separar el estilo del contenido.

Cierro diciendo que si bien en todo momento he estado hablando de centrar una web, estos métodos sirven para centrar cualquier capa de una web, sea un div, header, footer… Su uso será muy verátil dependiendo de nuestro diseño.

Si quieres seguir ampliando información sobre el tema, puedes consultar esta otra entrada en la que explico cómo centrar verticalmente una web con HTML y CSS.