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.