Centrado vertical con CSS
Patxi Echarte,
18. Mar, 2005,
13 Comentarios
CSS
La necesidad de centrar horizontalmente los webs es algo muy habitual en el diseño web, y para ello existen diversas técnicas bastante sencillas. Sin embargo no es tan habitual requerir el centrado vertical, por lo que hay menos información al respecto.
Sin embargo este centrado, así como el horizontal, es también bastante sencillo de conseguir. La solución más simple se basa en utilizar posicionamiento absoluto para ubicar la esquina superior izquierda de la capa en el centro de la pantalla y utilizar márgenes negativos para «moverla» y hacer que el punto central de la capa pase al centro de la pantalla.
#contenido{
font-family: Verdana, Geneva, Arial, sans-serif;
background-color: #f00;
text-align: center;
vertical-align: middle;
margin-top: -175px;
margin-left: -250px;
position: absolute;
top: 50%;
left: 50%;
width: 500px;
height: 350px;
} |
En el ejemplo anterior se ha creado una capa con identificador contenido de un tamaño 500×350. Mediante los atributos top y left hemos puesto su esquina superior izquierda (punto 0,0) en el centro de la pantalla, utilizando para ello un 50% en cada caso. Una vez hecho esto hay que mover la capa hacia la izquierda y hacia arriba, para que su centro coincida con el de la página. Esto se hace haciendo que el margen izquierdo tenga un valor negativo correspondiente a la mitad de la anchura, y que el margen superior corresponda a la mitad de la altura en negativo también. En esta página se puede comprobar el resultado final.
Este método puede tener un problema en función del tamaño de la pantalla del usuario y el tamaño de la capa a centrar. Si el tamaño de la capa es superior al disponible en la pantalla el resultado será que la coordenada (0,0) de la capa se desplace fuera de la zona de visión, hacia la izquierda o arriba según el caso. Para evitar esto se podría utilizar un javascript que tras la carga de la página o tras cambiar su tamaño, contemplase esta situación y recalculase los márgenes superior e inferior teniéndolo en cuenta.
Referencias:
- Vertical Centring with CSS. En esta página se muestra esta misma solución y se explica otra más que utiliza otra capa sin valor semántico para evitar un problema que había antes con Opera. En cualquier caso tal como indica la propia página, en una nota al pie, parece ser que esto ya no es necesario.
no funciona con IE.
Sí, sí funciona con IE.
gracias lo estaba buscando y si que funciona en IE
un saludo !
Perdon, pero eso funciona en explorer 7 pero no en 6
saludos!
igualmente gracias
Hola Pablo, este post es de 2005, así que puede que funcione con explorer 7, pero lo que seguro que sí, es que funciona con el 6, que es el que había en ese momento 😉
ole ole ole esos chicos
mil gracias
saludos
Buenisisimo!!
Excelente
perfecto. funciona en IE6, Opera 9.52, FF3
Con el debido respeto, porque ha demostrado funcionar, vaya chapuza.
Allí donde el css la marra, tablas
Funciona perfectamente, y qué simple. Gracias.
No me funciona, mejor dicho, funciona, pero al mirarlo en una resolucion inferior, o simplemente, achicando la pantalla del explorador, lo que sucede es que, se corta una parte de arriba, y una parte de la izquierda de la pagina que tenemos ahi… hay alguna solucion o alguna alternativa para que eso no suceda?
Gran aporte, no conocia este truco, lo voy a probar, ya os dire como me a ido, un saludo a todos