Centrar página web horizontalmente con HTML y CSS

Una de las primeras cosas que se aprenden cuando se empieza a trabajar como desarrollador web es centrar la página web 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. La diferencia es si queremos aplicarlo a una etiqueta existente, como podría ser el body del documento, o si queremos usar una etiqueta específica para centrar el contenido a modo de envoltorio. Ambos son equivalentes entre sí a nivel de funcionamiento, el uso de uno u otro dependerá de las necesidades que como desarrollador tengamos.

<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 el contenedor, lo hará también con los párrafos, encabezados, imágenes, etc, lo que nos obliga a tener que alinear a la izquierda el contenido que no queramos centrado. El segundo problema es que desde HTML4 ambos métodos se encuentran obsoletos y por tanto su uso está desaconsejado.

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 el diseñador web lo 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 te recomiendo centrar sólo 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, como maquetador web debes 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 versá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.