Lincenciada en Arquitectura Superior en la ETSAV (Escuela Técnica Superior de Arquitectura de Valencia) de la UPV.

Master de Diseño Gráfico y Web en ESDIP (Madrid).

Puedes encontrarme en Autentia: Ofrecemos servicios de soporte a desarrollo, factoría y formación

Somos expertos en Java/JEE

Ver todos los tutoriales del autor

Fecha de publicación del tutorial: 2011-10-20

Tutorial visitado 5.874 veces Descargar en PDF

Centrar una web en el navegador

Cómo centrar una página web en el navegador.

Introducción
Explicación
Conclusión

1. Introducción:

Vamos a aprender cuál es la mejor manera de centrar nuestra web en el navegador. Existen varias formas de hacerlo:

a) Una forma sería colocar la etiqueta <center></center> envolviendo todo el contenido de nuestra página en el html. El inconveniente de esto, es que centrará también los elementos dentro de la página, por lo que se nos podrían descuadrar y tendríamos que modificar nuestras hojas de estilo.

<center>
<div id="contenido">
EL CONTENIDO DE LA PÁGINA
</div>
</center>

b) Otra manera sería ponerle un margin: left; de un tanto por ciento a todo el contenido de la página. Por ejemplo:

<div id="contenido">
EL CONTENIDO DE LA PÁGINA
</div>

Y en la hoja de estilos le damos un ancho y el margen:

#contenido { "width: 1024px; margin-left: 7%; }

De esta manera siempre habrá un margen a la izquierda que "centrará" el contenido, el inconveniente de esta manera de actuar es que en los ordenadores con pantallas pequeñas y en los dispositivos móviles se verá la página desplazada hacia la derecha debido a ese margen. Por lo que no se verá eficazmente centrada.

c) La siguiente forma de centrar la página es la más recomendada y además la más sencilla, la explico a continuación:

2. Explicación:

Para centrar la web en todos los navegadores, incluidos los dispositivos móviles, sólo tendrás que realizar tres sencillos pasos:

1. Tienes que encerrar todo el contenido de la etiqueta body de tu página en un elemento <div>.
2. A ese <div> le das un atributo id de esta manera:

<div id="contenido">
EL CONTENIDO DE LA PÁGINA
</div>

3. En la CSS es imprescindible que le des un ancho a la web para que pueda ser centrada, por ejemplo:

#contenido { width: 800px; margin: 0 auto; }

El margin: 0 auto; será lo que centre la página dejando un margen automático a la derecha y a la izquierda.

¡¡Y esto es todo!! Aquí os dejo un esquema para que podáis verlo bien :-)

3. Conclusión:

Existen más formas de centrar una web, pero considero que esta es la mejor manera y la más sencilla para centrarla en todos los navegadores incluidos los dispositivos móviles. Y no hay que olvidar que el div en el que envolvemos toda la web necesita un ancho para que funcione.

Espero que os haya servido :-)

Cristina