Como centrar una pagina en CSS

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: