Centrado Vertical con CSS (actualizado)

12/ene/2007 51

(Ver actualización)

Una buena razón por lo que muchas personas defienden el uso de tablas para la diagramación de contenidos de un sitio web, es porque éstas permiten el correcto centrado horizontal y vertical de los elementos contenidos dentro de sus celdas. La propiedad vertical-align no es soportada por los browsers actuales, y va a ser lanzada con CSS3.0 (junto con muchas otras bien interesantes). Pues, a continuación les presentaré un método donde se utiliza efectivamente vertical-align, junto a un atributo poco utilizado de display y un hack para IE, como siempre necesario.

Antes que nada, necesitamos que nuestra superficie esté definida, en este caso al 100% de la pantalla (sin scroll). Esto lo logramos con height: 100% en 2 partes: el html y el contenedor de lo que queremos mostrar:

html, body {
     margin: 0;
     padding: 0;
     height: 100%;
}
#container {      display: table;      height: 100%;      width: 100%;      margin: 0; }

Nuestro poco utilizado display: table; lo que hace es dejar nuestro #container compacto, tal como nuesto viejo amigo

. Dentro de #content puedes encontrar display: table-cell; que se comporta tal como una celda dentro de una tabla (en este caso, #content sería una celda dentro de la tabla #container). Y es por este comportamiento de tablas que vertical-align entra en acción:

#content {
     display: table-cell;
     vertical-align: middle;
     position: relative;
}

Para finalizar el hack para IE, donde se centra #container pero con porcentajes:

/* \*/
 * html #content {
     top: 50%;
     left: 0;
     height: 1px;
}
* html #content #inner {
     position: relative;
     top: -50%;
}
  /* */

Ver código funcionando


Actualización:

Dado la llegada de IE7, a través de comentarios en este artículo (a los cuales les agradezco mucho su preocupación) me hicieron saber que este método de centrado vertical no funcionaba correctamente en este browser. Por lo tanto, investigando, me topé con un mejor método, que con los que he probado funciona a la perfección.

Ver código 2 funcionando

Más sobre display:

Gracias a 456bereastreet.

Comentarios

  1. irak rubio [#]

    Excelente pagina, y muy buen contenido. Gracias

Responder a irak rubio ×

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab