Centrado con CSS (2): Vertical

Alma Fernández 03/07/2006

Si centrar elementos horizontalmente con CSS es casi un juego de niños, el centrado vertical entraña una dificultad muy superior.

No existe una propiedad de CSS equivalente a vertical-align: middle que se pueda aplicar a elementos que no sean tablas por tanto se hace necesario emplear un pequeño truco para conseguir el mismo efecto.

En el siguiente ejemplo vamos a centrar un elemento verticalmente con respecto al tamaño de toda la página.

Creamos un contenedor al que daremos la propiedad display: table

.contenedor {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: fixed;
display: table; }

Creamos un segundo contenedor al que daremos la propiedad display: table-cell y sobre el que aplicaremos el centrado vertical-align: middle;

.centrado {
display: table-cell;
vertical-align: middle;
text-align: center; }

Y finalmente, creamos el que será nuestro contenedor centrado verticalmente, al que también daremos margin: 0 auto para centrarlo horizontalmente.

.contenido {
width: 200px;
height: 200px;
margin: 0 auto;
border: 1px solid #000;}

Centrado Vertical con CSS, ejemplo 1

Pero, claro, el Explorer no entiende estas simples instrucciones y, por tanto, se hace necesario emplear algunos trucos para conseguir un resultado compatible con la mayor parte de los navegadores.

Para ello, vamos a evitar utilizar el hack del guión bajo y, en su lugar, vamos a aprovechar un fallo del explorer para producir un CSS válido.

.contenedor {
top: 0;
left: 0;
width: 100%;
height: 100%;}

.contenedor[class] {
position: fixed;
display: table;}

.centrado {
position: absolute;
top: 50%;}

.centrado[class] {
display: table-cell;
vertical-align: middle;
text-align: center;
position: static;}

.contenido {
width: 200px;
height: 200px;
border: 1px solid #000;
margin: 0 auto;
position: relative;
top: -50%;}

El selector .contenido[class] es exactamente lo mismo que .contenido pero IExplorer ignora todos los selectores de atributo, lo cual nos permite introducir las instrucciones pertinentes para los navegadores más avanzados (como Firefox o Safari) sin que interfieran con el surrealista navegador de Microsoft.

Centrado Vertical con CSS, ejemplo 2

Otras entradas que pueden interesarte:

CSS, Codigo

Si te ha gustado este post no olvides suscribirte al feed para estar al tanto de las novedades

Eugenio Martínez Sierra dice:

4 Julio 2006 a las 0:59

Ahora que lo tenía casi conseguido…

De todos modos, no sabeis lo útil que me es esto ahora mismo

noelmf dice:

28 Diciembre 2006 a las 14:39

�Alguien sabe como se puede conseguir centrado vertical en ie7?

Un saludo!

atomik dice:

27 Marzo 2007 a las 11:29

Estos trucos estan muy bien, pero no funcionan en el Explorer 7. Una manera de solucionarlo es anidando una capa al 50% pero solo es una solución para contenidos pequeños.

Alma Fernández dice:

27 Marzo 2007 a las 13:34

Habrá que investigar un poco, gracias por el apunte

Mendi dice:

3 Enero 2008 a las 13:38

Muchas gracias Alma. Parece mentira que a estas alturas los navegadores no soporten el centrado vertical normalmente. Si es que al final nos obligan a usar tablas para algunas cosas…

Marco Nuñez G. dice:

5 Marzo 2008 a las 1:26

ups no sabes lo que me ha costado realizar que esto funcione bien… pero el problema radica en cuando se exede los limites no se visualiza el contenido que sobre sale… en firefox no funciona bien y rarisimo que en IE si funciona…
es extraño pero para eso no se cumple el estandar… ojala los navegadores evolucionen y se puedan leer este tipo de situacion.

sergiomas dice:

24 Mayo 2008 a las 20:51

Yo he conseguido mi propio sistema para centrar una web con css, y funciona en IE5.5, 6, 7, y hasta 8beta, Firefox, Opera, Safari, …, tanto horizontal como vertical y sin que al redimensionar el navegador deje de ser accesible todo el contenido.
Echadle un vistazo, a ver que os parece.

Juglar :: Centrar :: August :: 2005 dice:

24 Agosto 2006 a las 20:45

[...] Verticalmente: W3C: Centrar un bloque hicksdesign: vertical centering with CSS badboy.media.design: Vertical align with CSS Vertical centering using CSS Vertically Align Content in Body Vertical centering Vertical center Webmaster Libre » Centrado con CSS (2): Vertical [...]

Webmaster Libre » Archivo del weblog » Centrado con CSS (1): Horizontal dice:

28 Agosto 2006 a las 14:15

[...] de 2006 a las 0:21 y está archivada en: Codigo, CSS. Puedes dejar un comentario, o enviar un trackback desde tusitio. [...]