Como centrar una pagina en CSS

In: Diseño Web

22 Apr 2009

Para los que inician en CSS, una de las principales dudas, o de las primeras cosas que se quisieran hacer para desarrollar una página web es cómo hacer para que ésta aparezca centrada.

En realidad no es para nada complicado y vamos a ver cómo con básicamente 2 reglas podemos obtener esto:

Primero que todo, en el código que vayamos a desarrollar, necesitaremos un contendor. Allí se incluirá todo el layout, que es lo que queremos centrar. Naturalmente, vamos a llamar a este contenedor … “contenedor”

El código sería algo así:

<body>
<div id=”contenedor”>
…layout…
</div>
</body>

Usando las siguientes reglas en CSS podremos hacer que todo se encuentre centrado:

body {
text-align: center;
}

#contenedor {
margin: 0 auto;
width: xxxpx;
}

Básicamente estamos diciendo que todo lo que se encuentra en el Body debe estar centrado, mientras le damos un ancho específico al contenedor (obviamente en el código hay que reemplazar el xxxpx, por un valor en pixeles, por ejemplo width: 980px;).  La otra regla importante dentro del contendedor es la de “margin: 0 auto;”. Allí se indica 0px arriba y abajo, mientras que a los lados se ajusta automáticamente.

Para alinear el texto de la página como tal a la izquierda, se debe añadir una regla:

#contenedor{
margin: 0 auto;
width: xxxpx;
text-align: left;
}

Allí, se indica que todo lo que esté dentro de #contenedor, va a estar alineado a la izquierda.

4 Comentarios en Como centrar una pagina en CSS

Avatar

Iván

April 23rd, 2009 at 6:46 pm

El text-align:center; para body no es necesario. ¡Saludos!

Avatar

jseros

May 30th, 2009 at 4:09 pm

@ivan Si es necesario. Algunos navegadores no interpretan correctamente la margen lateral automática(Entiendase IE6).

Avatar

IngVillamizar

June 22nd, 2009 at 6:00 am

@jseros Gracias por la aclaración 🙂

Avatar

Juan

March 12th, 2010 at 4:53 pm

Creo que cuando centras tu contenedor . . puedes caer en el error de definir unicamente dos lados . .si eso se puede sin embargo la w3c te marca error cuando validas las paginas . . creo que se tienen que definir los cuatro lados

Comentarios:

Suscripcion a Newsletter:

Sobre este blog ...

He abierto este blog para brindar información sobre desarrollo y diseño web principalmente. Espero que la información que les presente aquí les sea útil de alguna forma. Ah tengo cuenta de twitter en @alexanderv33