Cómo centrar una página web en el navegador.
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
EXCELENTE FUNCIONA DE MARAVILLA Y ES SUPER SIMPLE… GRACIAS 😉
Gracias a ti por el comentario 🙂 Me alegra que te haya servido. Un saludo!
Lic. Fernandez, mil gracias, no solo por la aportaciòn que esta excelente, sino por tomarse el tiempo y la molestia de compartirlo y ayudar a muchas personas, desde la Ciudad de Mèxico mi agradecimiento y felicitaciones 🙂 🙂 😉
Gracias Cristina, por fin pude hacerlo, solo era intentar, intentar y seguir intentando y todo a una explicación muy directa y bien hecha. Me sirvió la opción tres y era dejar la posición del como «relative», ya que los otros divs los tenía como «absolute». Gracias de nuevo, sería bueno saber donde más compartes lo que sabes, quisiera probar con la animación 3D.
Cristina, por favor, para centrar también en vertical, independienbtemente de la resolución de la pantalla hay algo similar?.
Gracias
Hola, gracias por la explicación. Ahora me gustaría saber como hacer que mi página siempre esté centrada en Muse, se me alinea a la izquierda y no se que ha pasado. ¿Tienes idea de eso?
Gracias, un saludo
Hola Sonia, tengo el mismo problema en Muse, pudo solucionarlo? como lo hizo? gracias.
Gracias Cristina.
Se agradece la comparativa y lo breve y efectivo del código. Gracias.
Eres UN Primor de Mujer. Siempre he pensado que la Belleza NUNCA podría ir de la mano con la Inteligencia… TU ERES LA PRUEBA DE LO CONTRARIO. Gracias, me has aclarado una eterna duda.
Venezuela.
El comentario más machista y absurdo que he leído últimamente… ¿de verdad pensabas hasta que escribistes esto que la belleza tenía alguna relación con la inteligencia?
Excelente explicacion! Muchas gracias por el aporte.
me puedes ayudar no le ntiendo bien o alguien me puede ayudar mm gracias
¿Cómo afectaría ese width 800px si la pantalla del dispositivo fuera de un móvil o similares? (menor de 800 px)
gracias lo tenia mal escrito
Gracias Cristina quedó para ambas pantallas.
Excelente tema. Muchas gracias, Un saludo
Nos autorizas a comentarlo en mi web. Muchas gracias, Un saludo
Me parece una buena aportación hacia los jóvenes de hoy en día ya que necesitan de toda la información mas mínima para que comprendan.
Excelente aportación Buen día.