blog banner

Cómo centrar una página web?

Una de las tareas frecuentes que hago en la maquetación de páginas y que a menudo me preguntan cómo realizar es el centrado de una página web, o sea que la página aparezca en el centro del navegador dejando igual espacio «en blanco» en los laterales. El método que uso es sencillo y se basa […]

Una de las tareas frecuentes que hago en la maquetación de páginas y que a menudo me preguntan cómo realizar es el centrado de una página web, o sea que la página aparezca en el centro del navegador dejando igual espacio «en blanco» en los laterales.

El método que uso es sencillo y se basa en la propiedad text-align. Primero creo una estructura de página como esta:

<html>
<head>

<!– Mi título, metadatos y otras cosas de esta sección –>

   <link rel=»stylesheet» type=»text/css» media=»all» href=»miCss.css» />
</head>
<body>
<div class=»pagina»>
   <div class=»contenido»>
           contenido de la pagina
    </div>
</div>
</body>

Seguidamente paso a desarrollar el css de la página. Primero defino el elemento body

body{background-color: #aaa; text-align: center}

Le asigno un color de fondo que será el que representará el fondo en el navegador y que quedará fuera de lo que es la página y a la propiedad text-align le asigno el valor center, que establecerá que el contenido en Internet Explorer se centre. Para el resto de navegadores esto no es necesario.


A la primera capa dentro del body le hemos asignado la clase «pagina» y es la que contendrá la información y la que queremos que aparezca en el centro. Por ello le asignamos los siguientes valores:

.pagina{width: 85%; float: none; margin: 0 auto; text-align: left}

En esta declaración le establecemos un ancho y lo que hará que realmente se centre: la propiedad float con valor none, que hará que la capa no tenga alineación forzada, y estableceremos el margen lateral a auto, anulando cualquier posible valor predefinido. Así la capa se ubicará en una posición que dejará el mismo margen por ambos lados.
Para el caso de IE esta capa tomará el centrado horizontal indicado por el body y lo anularemos para las capas interiores con un text-align: left o justify (si queremos, vamos).

Por último la capa «contenido» es la que dará el color de fondo a la página, así como las propiedades que no hemos podido establecer en la capa «pagina» por anularle el float.

.contenido{height: 80%; background-color: #fff; }

Con estas tres entradas en el css se obtiene un resultado como el siguiente

 A partir de este punto, el resto es cosa vuestra… 😉

  • Buenas muy buen blog.

    Gracias por las explicaciones.

    Yo hasta ahora cuando centraba una capa utilizada el width:960px y margin:0 auto.

    El text-align:center en el body es para cubrir algún tipo de navegador?

    Un Saludo

  • Hola Lucas,
    Efectivamente… Hay algún navegador (creo recordar que era IE7) que no centra la página si no fuerzas el text-align previamente.

    Sin embargo, en todos los navegadores en sus versiones actuales ya no es necesario. Yo personalmente por lo que cuesta lo dejo, pero ya se podría empezar a prescindir de ello y el impacto sería mínimo.

    Gracias por tu comentario y un saludo.

  • Muchas gracias.

    No llegara el día que se cumplan los estándares.

    Si llega el día, a que nos dedicaremos los maquetadores?

    Un Saludo

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *