Como centrar una pagina web

Actualizado el 20/11/2009 < > 12 Cometarios

Resumen: Cada vez hay monitores más grandes y con mayor resolución, y eso es algo que hay que tener en cuenta eso al momento de diseñar un web.

Meneame Bitacoras

Cada vez hay monitores más grandes y con mayor resolución, y eso es algo que hay que tener en cuenta eso al momento de diseñar un web.

¿Páginas centradas?

Me refiero a que por defecto, el contenido de las páginas está alineado a la izquierda, es decir, el contenido de tu página está pegado al borde izquierdo de la ventana del navegador.

Esto nunca fue un problema cuando la mayoría usaba monitores de 800 x 600, pero ahora (y desde hace bastante tiempo) este tipo de resolución casi ha desaparecido, entonces conviene diseñar pensando en monitores con resoluciones mayores.

Es mucho más fácil darse cuenta de esta diferencia con una imagen, aquí te muestro cómo se vería Aprendiendo Web centrado y alineado a la izquierda…

Diseño web de Aprendiendo web centrado y alineado a la izquierda.

Como centrar una página web en el navegador

Ahora que ya sabes que hay una gran diferencia, es hora de ver cómo hacemos para centrar un diseño web… en realidad es bastante fácil.

Lo primero que hay que hacer es encerrar todo el contenido de la página en un elemento <div> y darle un atributo id, en este caso usaré:

id="content"

Luego vamos a la hoja de estilos y agregamos esto:

#content {  width: 990px;  margin: 0 auto;  }

Lo que estamos haciendo aquí es primero que nada darle un ancho al elemento, esto es lógico ya que cuando quieres centrar algo dentro de otra cosa tienes que saber de que tamaño son.

margin: 0 auto; significa que ese elemento tiene un margen de 0 arriba y abajo, y un margen automático para izquierda y derecha, este margen automático es el que lo centra.

Te darás cuenta con esta imagen:

Centrar un elemento div usando margin: 0 auto;

Eso es lo básico al momento de centrar una página web, de hecho hay muchas cosas más, pero la idea es dejar este post lo más sencillo posible.

Meneame Bitacoras

Publicado el 20/11/2009, última actualización 20/11/2009.

Autor: Germán Martínez

URL: AprendiendoWeb.com

Añadir Comentario (Subir al texto)

12 Cometarios

  1. beleita

    Nunca me habría imaginado un post tan largo para algo tan sencillo, ahora… claro a quedado clarisimo :)

    Y si álguien no se ha enterado… es para colgarlo!

    Un saludo.

    Viernes, 20 de noviembre 2009

  2. Verónica M.

    Es sencillo sí, pero hay personas que no tienen muchas nociones de diseño y es más sencillo si se explica de forma detallada :)

    Viernes, 20 de noviembre 2009

  3. Jaime B.

    Gracias por el dato, no pensaba que era tan fácil centrar una página…

    Viernes, 4 de diciembre 2009

  4. 8 Consejos para el diseño de un buen layout o estructura web

    [...] el color para definir los espacios: si quieres diseñar una página con anchos fijos, ¿por qué no centrar la web en la pantalla del navegador y mejorar así su presentación? Mira el ejemplo que se propuso en una guía anterior, ¿qué te [...]

    Viernes, 11 de diciembre 2009

  5. tiam

    excelente… bien claro y directo…!! Muy agradecido

    Lunes, 18 de enero 2010

  6. JuserNt

    Ese codigo

    #content { width: 990px; margin: 0 auto; }

    Funciona en navegadores actuales pero los anticuchos como IE6 se ladea. A pesar que las cosas avanzan algunos todavia usan este navegador, creanmelo!!!

    Lunes, 22 de febrero 2010

  7. Verónica Milán

    JuserNt,

    Para centrarlo el IE 6 hay que añadir un pequeño truquito, al body le das align-center:

    body { text-align: center; }

    Y entonces a #content le corriges la alineación para que no te centre todo, incluido el texto claro:

    #content { width: 990px; margin: 0 auto; text-align:left; }

    Saludos.

    Sábado, 27 de febrero 2010

  8. Maquetación de páginas web: crear un menu horizontal con CSS

    [...] Comenzando con la elaboración del sitio, en primer lugar ubicaremos una capa contenedora (<div>) de 900px y la centraremos. [...]

    Miércoles, 9 de junio 2010

  9. alejandro

    hola! yo trato de agregar lo que me dices y si se centra pero en la parte izq. superior sale lo que me dices que agrege lo de id= y eso

    Viernes, 10 de septiembre 2010

  10. Verónica Milán

    Alejandro,

    Debes haber puesto algo de más o de menos en el código, tal vez unas comillas, un corchete… revisa que lo tengas todo completo.

    Viernes, 17 de septiembre 2010

  11. Gabriela

    Hola estoy haciendo una página y en todos los exploradores esta centrada con este código
    #grupo {
    position:relative;
    width:1150px;
    height:auto;
    z-index:57;
    left: auto;
    top: auto;
    margin-right: auto;
    margin-left: auto;

    Pero en Internet Explorer no se centra, alguien puede ayudarme????

    Jueves, 10 de noviembre 2011

  12. Verónica Milán

    preuba a darle text-align: center

    Y si es un elemento en llinea, también display: block
    saludos

    Viernes, 9 de diciembre 2011

(Subir al texto)

Añadir Comentario

* Campos obligatorios