CSS centrado vertical

De la mano de www.eslomas.com por fin, he encontrado la solución a centrar verticalmente una página, llevaba mucho tiempo buscando esta solución y creo que es interesante compartirlo con vosotros.

La idea es muy sencilla:

#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;
}

Simplemente hay que crear una capa contenedora general de nuestra web con una posición absoluta colocando el top y el left al 50% lo que hace que la esquina superior izquierda de la página se coloque en el centro del navegador. Ahora solo hay que centrar la capa con un margin-top y margin-left de la mitad de la medida de tamaño.

width: 500px;
margin-left: -250px;
height: 350px;
margin-top: -175px;

Podéis ver el ejemplo en mi web: mascruz.es

Espero que os sirva de utilidad como me ha servido a mí.

Saludines,