Centrar una web, vertical y horizontalmente, con CSS y sin tablas ni efectos secundarios.
Para concretar desde el principio, este tip-tutorial describe como centrar un elemento de bloque, un div en este caso, de dimensiones fijas y que puede albergar un sitio web, en medio de la ventana de un navegador, tanto vertical como horizontalmente.
Lo que tiene de especial este artículo con respecto a otros de la misma temática, es que resuelve lo que vengo a llamar “efectos secundarios”, y me refiero al molesto comportamiento del div cuando redimensionas el navegador y parte de la web queda oculta sin que se pueda acceder a ella con las barras de scroll, no por que no estén si no por que no dan de sí.
Desde ahora me referiré al div#contenido como “Web“.
Para los más impacientes aquí está un ejemplo de web centrada vertical y horizontalmente, y a continuación el código xhtml/css:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Centrar una web en el navegador, vertical y horizontalmente, siempre visible y sin usar tablas</title>
<meta name="description" content="Sistema XHTML y CSS para centrar una web en pantalla, vertical y horizontalmente, siempre visible y sin usar tablas. Depurado por sergio Mas (saltarintro.com)" />
<style media="screen" type="text/css">
html, body {
height:100%;
margin:0;
}
body {
position:relative;
min-width:700px;
min-height:500px;
}
#contenido {
position:absolute;
background-color:#ccc;
width:700px;
height:500px;
top:50%;
left:50%;
margin-top:-250px;
margin-left:-350px;
}
</style>
<!--[if lte IE 6.0]>
<style>
#contenido {
top:expression(document.body.clientHeight < 501? "0px": "50%" );
margin-top:expression(document.body.clientHeight < 501? "0px": "-250px" );
left:expression(document.body.clientWidth < 701? "0px": "50%" );
margin-left:expression(document.body.clientWidth < 701? "0px": "-350px" );
</style>
<![endif]-->
</head>
<body>
<div id="contenido">
<h1>CENTRAR UNA WEB</h1>
<p> ... </p>
</div>
</body>
</html>
Ahora vienen las explicaciones.
La manera más fácil de centrar una Web es darle al tag html y body una altura (height) de 100%, añadir una tabla de una sola celda con alineación vertical y horizontal, y colocar dentro un div de dimensiones fijas.
Rápido, sencillo, y alejado de las buenas prácticas. ¿Por qué? Por que no se debe utilizar una tabla para maquetar una web, pues no es su cometido. Las tablas sirven para presentar datos de forma tabular.
Semánticamente, los tags dentro de una tabla disminuyen su valor específico de cara a buscadores, y los lectores de pantalla para discapacitados escupen una cantidad de información deslabazada casi imposible de entender, por poner un par de ejemplos.
Asi que el reto era crear una plantilla de partida que utilizara solo CSS.
El archivo html inicial sería así:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>sin título</title>
<meta name="description" content="Sistema XHTML y CSS para centrar una web en pantalla, vertical y horizontalmente, siempre visible y sin usar tablas. Depurado por sergio Mas (saltarintro.com)" />
</head>
<body>
<div id="contenido">
<h1>CENTRAR UNA WEB</h1>
<p> ... </p>
</div>
</body>
</html>
Es muy importante incluir el Doctype adecuado por que de ello depende que los navegadores interpreten correctamente el CSS posterior.
En mi ejemplo he utilizado XHTML Transitional, pero creo que funcionará igualmente el Strict.
La mayoría de soluciones que encontré en Internet se pueden resumir así:
#contenido {
position:absolute;
width:700px;
height:500px;
top:50%;
left:50%;
margin-top:-250px;
margin-left:-350px;
}
Se da posicionamiento Absolute al div contenedor. Se establecen sus dimensiones. Se posiciona su esquina superior izquierda justo en el centro de la pantalla. Y mediante un margen negativo igual a la mitad de sus dimensiones se rehubica centrado en pantalla.
Y funciona. Pero …
En caso de hacer más pequeña la ventana cliente del navegador que el tamaño de la Web, aparecen los efectos secundarios:
El defecto es más acusado cuanto más disminuye la ventana del navegador.
Y se da tanto vertical como horizontalmente. Esto es así a causa de que el posicionamiento, por ser absoluto se situa independiente de la lista de elementos del código, y aunque tiene el centro en la página, los márgenes negativos pueden situar la web fuera de la vista de la ventana.
La solución es muy simple pero no funciona en Internet Explorer 6 y predecesores, (aunque esto también se resuelve después).
Simplemente hay que darle al bloque contenedor de la Web, en mi caso el propio Body, un ancho y alto mínimos, igual al tamaño del bloque #contenido.
html, body {
height:100%;
margin:0;
}
body {
position:relative;
min-width:700px;
min-height:500px;
}
Lo de la posición relativa permite que algún navegador, no recuerdo cual, interprete correctamente dichos ancho y alto mínimos.
Ahora el resultado de redimensionar el browser cambia aparentemente el comportamiento de la Web de una posicion centrada a otra fija desde la parte superior izquierda.
La visualización es correcta en Internet Explorer 7, Firefox, Opera, Safari, y en el extinto Netscape (incluso en la versión 7.2 que usaba un motor para renderizar diferente al de Firefox).
Pero en IE6 y también en IE5.5 (no quise remontarme más allá) no funciona, no hay soporte para ancho y alto mínimos. No interpretan el min-width y el min-height. Y no conseguí que ningún hack css funcionara correctamente.
Esas versiones del browser de Microsoft son importantes, sobre todo la 6, por que actualmente es la que tiene más presencia en Internet.
Lo ideal sería que todo se resolviera solo con CSS, pero su inacabada implementación en algunas versiones de Internet Explorer hacen tarea imposible dicho propósito.
Asi que “Para problemas propietarios soluciones propietarias”.
Gracias a los comentarios condicionales y a unos scripts propiedad de Microsoft, solo interpretados por IE, se logra el milagro.
<!--[if lte IE 6.0]>
<style>
#contenido {
top:expression(document.body.clientHeight < 501? "0px": "50%" );
margin-top:expression(document.body.clientHeight < 501? "0px": "-250px" );
left:expression(document.body.clientWidth < 701? "0px": "50%" );
margin-left:expression(document.body.clientWidth < 701? "0px": "-350px" );
</style>
<![endif]-->
Las expresiones incluyen un condicional terciario que cambia los valores de los parámetros CSS en función de las proporciones de la ventana cliente del navegador.
No deja de ser un parche, pero funciona y permite validar el XHTML y el CSS de la página.
Si alguien encuentra alguna manera de hacerlo todo con CSS, sin hacks, ni soluciones propietarias, que deje un comentario.
Me encantaría hacer un UPDATE al post y seguir aprendiendo.
Muchas gracias por este post!!!!
La verdad es que he buscado por todas partes una manera de centrar mi web y nadie ha podido ayudarme. Mucha gente dice que con text-align: “center” es suficiente y con margin: auto tambien pero no es así porque el texto no se mueve al unísono con el fondo aunque todo esté incluido en una capa global.
El caso es que he ido aplicando paso a paso lo que has puesto en tu post, y funciona!! la página esta centrada y todo se mueve al unísono, textos y fondo de mi capa global. Lo que no me funciona es el script de microsoft. Teniendo en cuenta que mis conocimientos son bastante limitados a este respecto te paso mi código fuente a ver si está bien aplicado. Yo he usado código html no xhtml, no se si ese puede ser el problema.
A ver si me puedes echar un cable!!
Este es mi html:
OC arquitectura y urbanismo / PROMOCIONES INMOBILIARIAS
body { height:100%; margin:0;}
body {position:relative; min-width:980px; min-height:500px;
global {
top:expression(document.body.clientHeight < 561? “0px”: “50%” );
margin-top:expression(document.body.clientHeight < 561? “0px”: “-280px” );
left:expression(document.body.clientWidth < 981? “0px”: “50%” );
margin-left:expression(document.body.clientWidth < 981? “0px”: “-490px” );
entrar
entrar
Esta es mi hoja de estilos:
body
#global {position:absolute; width:980px;height:560px; top: 50%; left: 50%; margin-top: -280px; margin-left:-490; padding:auto auto auto auto ; background-image: url(objetos/paginaprincipal.png); background-repeat: no-repeat; background-position: center center}
body {background-color: black}
a {color: white; text-decoration:none}
a:hover {color:#8b8989; text-decoration:none}
Espero tu respuesta. Gracias!!
Jonna
25 Jul 08 at 12:49 pm
Creo que lo mejor es que subas tu html/css a alguna parte y dejes el enlace.
Saludos
Administrator
25 Jul 08 at 2:45 pm
pudiste bajarte la página?
Jonna
29 Jul 08 at 1:48 pm
Hola Jonna
Me pude bajar tu página.
El caso es que se nota que estás empezando y todo son dudas. Lo malo es que las tienes a un nivel muy básico.
Tienes en esta misma página todo el código que necesitas para poder crear tu página centrada.
De todas maneras te he dejado un archivo con tu ejemplo funcionando: http://saltarintro.com/files/OC.html
saludos
Administrator
30 Jul 08 at 6:13 pm
Ya estoy aqui de nuevo, perdona que siga dando la vara!!!
ante todo gracias por responderme.
He probado el ejemplo que me mandaste en internet explorer 6 y sigue saliendo el defecto de perderse parte de la pantalla.
¿A que puede deberse?
Jonna
31 Jul 08 at 10:43 am
Ya está bien. El id del comentario condicional estaba mal escrito.
Limpia la cache del ordenador. Recarga la página, y ya lo tienes.
Saludos
Administrator
31 Jul 08 at 11:13 am
muchas gracias!!!! espectacular!!!
cuando suba la página te pondre en esta misma página un post para
que veas los resultados.
reitero las gracias!!
Jonna
31 Jul 08 at 11:47 am
Buenas, sólo una corrección.
El comentario para css es:
…
También estoy mirando este tema, así que espero en breve mejorar este asunto. De todas formas, te dejo un enlace a un framework js+css que te crea unas plantillas basadas en layers bastante decentes y así se puede investigar cómo se hacen ciertas cosas. Además tiene un builder para modificar las plantillas que vienen en los ejemplos.
http://www.yaml.de/en/
La herramienta que permite configurarlo, generando el XHTML y hojas de estilo adicionales al propio Framework.
http://builder.yaml.de/
Un saludo.
Gatokiller
7 Sep 08 at 12:10 am
Vaya, no deja meter código directamente.
Repito:
<!–[if IE 6]>
…
<![endif]–>
Gatokiller
7 Sep 08 at 12:12 am
Y me quita un guión de cada tag…
Gatokiller
7 Sep 08 at 12:12 am
Gatokiller, el comentario condicional [if lte IE 6.0] es correcto e indica que se aplicará cuando el navegador sea Internet Explorer versión 6 y anteriores, por que si solo ponemos [if IE 6] afectaría únicamente a la versión 6.
Ah¡ y muy interesante lo de YAML
Saludos
Administrator
7 Sep 08 at 9:05 am
Muchas gracias!!!
Llevaba tiempo buscando una solución así, y me ha ido genial.
Klaus Kinki
13 Nov 08 at 1:19 pm
Muchas gracias por el articulo. Me ha ayudado muchisimo. Saludos!!
Josekont
18 Feb 09 at 7:53 pm
mil gracias… efectivamente fuenciona muy bien en todos los navegadores
Bio
5 Mar 09 at 6:06 pm
Muy bueno el ejemplo, y me funciona, pero tengo una duda.
Como puedo hacer, si yo ya tengo parte del sitio armado, para aplicarlo?
Deberia meter todo lo que tengo hecho (con Divs y css está hecho) dentro de un DIV “madre”, que es el que va a estar centrado?
Muchas gracias por la respuesta
Pablo
10 Mar 09 at 6:01 pm
Efectivamente, debes meterlo todo en un div madre.
Mi consejo sería que lo metieras todo en un div con el posicionamiento en ‘relative’ y este a su vez en otro div que será el que yo he marcado como “#contenido” en mi ejemplo.
La razón de esto es que de esa manera, si has posicionado previamente algún elemento en “absolute”, las coordenadas (0,0) de esos posicionamientos serán ahora la esquina superior izquierda del div relative que he comentado antes.
sergiomas
10 Mar 09 at 6:29 pm
Gracias por la info. Me ha servido mucho el tutoríal Sergio.
Como consulta me gustaría saber si el centrado vertical en CSS solamente funciona con tamaños fijos porque he buscado en la net varios, varios ejemplos y no he podido dar con una solución apropiada.
Un abrazo grande.
Leandro S. Ramirez
16 Mar 09 at 10:14 pm
Cuando escribí el post, hace casi un año, estuve buscando alguna solución, pero siempre fallaba en algún navegador, y hoy por hoy, el parque de browsers ha cambiado poco, asi que no creo que exista solución todavía.
La idea es que un elemento de bloque quede centrado dentro de otro de la manera en que funciona una celda de una tabla con centrado vertical.
El problema es que no se debe utilizar tablas para maquetar, si no sería anti-estandar, aunque muy fácil de implementar y con resultados óptimos.
¡¡Qué rabia!!
sergiomas
16 Mar 09 at 10:47 pm
Buenas
Con respecto, a usar este código con tamaño variable. Entiendo que os referís a hacerlo valido para varias resoluciones a la vez.
Yo mismo estoy intentando aplicar eso, y de momento la solución que voy a probar es, los atributos de tamaños para el Body y el contenedor en el CSS sacarlos a una nueva hoja de estilos, y mediante javascrip cargar una u otra según la resolución. Por ejemplo
Hoja de estilos a 800×600
————————-
body
{
min-width:700px;
min-height:500px;
}
#wrapper
{
width: 700px;
min-height: 400px;
margin-top: -200px;
margin-left: -350px;
}
Hoja de estilos a 1024×768
————————-
body
{
min-width:900px;
min-height:650px;
}
#wrapper
{
width: 900px;
min-height: 650px;
margin-top: -325x;
margin-left: -450px;
}
Laegnur
25 Abr 09 at 12:00 am
Lo del tamaño variable no está relacionado con las resoluciones de pantalla si no con las dimensiones de la ventana del navegador.
Lo interesante sería que el elemento bloque contenedor tuviera dimensiones en tanto por cien, y que no requiriera de javascript para que funcionara todo bien aunque no esté activado la ejecución de scripts.
sergiomas
25 Abr 09 at 7:31 am
Hola, ante todo gracias por el tutorial y ayuda que das en este sitio. He podido ajustar el centrado de paginas vertical y horizontal a las medidas que necesito, mi pregunta es como hago para que al cambiar de resoluciones de pantalla, el contenido que esta dentro, por ejemplo una imagen, no se deforme y mantenga su aspecto original, espero puedas ayudarme, gracias.
Andres
14 May 09 at 11:16 am
En realidad solo cambias las dimensiones del elemento contenedor. Si una imagen se deforma puede ser por que no tenga definidos los parámetros width y height en el html.
sergiomas
14 May 09 at 11:24 am
hola a todos aca les dejos una solucion mucho mas practica y facil para centrar una web de manera horizontal
Solo deben agregar este codigo //margin:0px auto;//
ejemplo
#container{ /*contenedor de todo*/
width:960px; /*ancho de nuestra web*/
margin:0px auto;/*centrado*/
width:960px;
}
Saludos y espero les sirba
Peladiguis
15 May 09 at 1:19 am
Hola a todos, está bueno el post, pero, la mejor de todas fué la aportada por Peladiguis.
Polo
17 Ago 09 at 1:52 am
Excelente información Sergio de verdad que mereces ser llamado Maestro!! muy buena explicación clara y práctica, Felicidades.
Tambien probé lo que dice Peladiguis y funciona muy bien tambien aunque he de aclarar que fue gracias a la información del Maestro Sergio que pude entenderlo.
Gracias nuevamente y sigue asi Maestro.
Furiaroa
24 Sep 09 at 9:57 pm
Nada de maestro. Compañero.
sergiomas
25 Sep 09 at 8:26 am
Hola Sergio, disculpa, tengo un problema, estoy creando una pagina con una imagen de background en el body, tengo un “div id=mainPan” con posicion relativa y dentro de este tengo otro “div id=bodyPan” con un background de x color, el problema es que no se me muestra el color del “div id=bodyPan”, a menos que quite la posicion relativa del “div id=mainPan”, me podrias ayudar con esto, una vez mas gracias…
jereny
22 Oct 09 at 5:59 pm
Jereny, con los datos que me das es imposible saber la razón de tu incidencia. Habría que ver el código en general.
sergiomas
22 Oct 09 at 6:07 pm
Hola! Muchísimas gracias por esta ayuda, creo que nos ha solucionado la vida a muchos y lleva más de un año dando vueltas!
He conseguido centrar mi web pero el problema que me surge es que siempre me deja arriba un margen bastante más grande que el de abajo, no me la centra exactamente en medio, ¿sabes por qué podrá ser? [Pongo el código exactamente igual que el tuyo y en el body pongo la div con mi contenido que es simplemente un elemento flash o una imagen según el caso].
Muchísimas gracias por tu paciencia!
macufeliz
8 Nov 09 at 9:59 pm
Me da la sensación que no has editado algún valor del css.
Lo mejor sería que publicaras un enlace a una página de prueba o un zip con los archivos para comprobarlos.
saludos
sergiomas
8 Nov 09 at 10:10 pm
Gracias por ser tan atento
Entra en esta web y entra en “Malta”. A esa página es a la que le he aplicado tu código (le puse en dreamweaver la div al flash que había hecho previamente). Si te fijas, queda más abajo de lo normal.
http://macufeliz.com/
Mil gracias de nuevo!
macufeliz
9 Nov 09 at 1:48 am
macufeliz, has copiado y pegado tal cual, sin editar las medidas del css.
Tu flash es más grande que el div contenedor del ejemplo.
sergiomas
9 Nov 09 at 9:58 am
solucionado!!!! muchísimas gracias por tu paciencia y dedicación y perdón por mi torpeza.
gracias gracias gracias!!!!
macufeliz
9 Nov 09 at 11:49 am
Sergio, realmente me fue de mucha utilidad este post, me funciono a la perfección, lo unico q te queria preguntar es que si yo tengo los css en un archivo aparte, la parte que pones ahi para el IE 6 donde lo tendria q poner?
realmente, muchas gracias por este post, me ayudo demasiado!!!
Lucas
28 Dic 09 at 9:49 pm
Hola Lucas
La parte del IE6 debe ir en el código html, dentro de la etiqueta Head.
El navegador cargará todo el código pero hará caso omiso del comentario salvo que dicho navegador sea el Internet Explorer version 6 o inferiores.
Saludos
sergiomas
29 Dic 09 at 10:37 am
Joya Sergio!!! muchisimas gracias!!! que tengas un excelente año nuevo!!!
Saludos
Lucas
29 Dic 09 at 7:31 pm
Hola Lucas, perdona que te moleste de nuevo pero ¿sabrías decirme cuál sería la solución para que en IE8 (en el 7 no lo he probado) no se oculte la parte superior de la web? Muchísimas gracias por tu tiempo y soluciones!
macufeliz
17 Feb 10 at 3:13 pm
(Quería decir Sergio, perdón)
macufeliz
17 Feb 10 at 3:48 pm
Macufeliz, No se ve bién en IE8 e IE7 por que abren tu web en “modo No estandar” ya que tiene errores en el código.
Válida la página y encontrarás esos errores.
Si se fuerza a IE a mostrar lá página en modo correcto se ve perfectamente.
Saludos
sergiomas
18 Feb 10 at 10:03 am
Muchísimas gracias Sergio! Voy a ver si consigo arreglarlo
macufeliz
19 Feb 10 at 1:00 pm
Sergio, muchas gracias, me has quitado un problemazo de encima, la de quebraderos de cabeza que me había causado el tema de centrar la página para todos los navegadores.
GRACIAS, GRACIAS, GRACIAS
sparrow
5 Mar 10 at 7:05 pm
Un placer sparrow, y macufeliz también.
sergiomas
5 Mar 10 at 7:32 pm
muy util, aun 2 años despues
ademas, muchas gracias por la explicación, sino no aprendemos
erikcrane
31 May 10 at 11:07 am
Gracias a tí por tomarte la molestia de escribir un comentario de algo escrito hace dos años.
sergiomas
31 May 10 at 12:30 pm