Resulta que es un tema complicado este, si queremos centrar verticalmente usando únicamente CSS. Buscando un poco no he conseguido que me funcione como yo quiero al 100% ninguna de las soluciones.
Casi todos los documentos que he encontrado sirven para centrar los elementos verticalmente en una capa, pero no para centrarlos verticalmente en la página entera.
Te paso las referencias que he consultado, que han ofrecido una solución más óptima:
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
Que tiene un resumen en castellano en:
http://www.forosdelweb.com/showpost.php?p=967310&postcount=50
Pero al convertir la solución anterior para que me muestre centrado para todo el contenido de la página y no sólo para una capa, en Internet Explorer, cuando los elementos de la página crecen mucho verticalmente, se me pierden por la parte de arriba. El código sería el siguiente:
<html>
<head>
<title>centrar una capa verticalmente</title>
<style type="text/css">
BODY{
text-align: center;
}
#total{
display:table;
height:100%;
text-align: left;
margin: auto;
}
#contenido{
_position: absolute;
_top: 50%;
display: table-cell;
vertical-align: middle;
text-align:left;
width:400px;
}
#centrar{
_position: relative;
_top: -50%;
background-color:e0e0e0;
border-style:solid;
border-width:2px;
border-color:#999999;
}
</style>
</head>
<body>
<div id="total">
<div id="contenido">
<div id=centrar>
<h1>Hola</h1>
Esto está alineado verticalmente... es una prueba como otra cualquiera. Pillo un texto cualquiera para pegar aquí y hacer que el tamaño de la capa crezca un poco.
<br><br>
Código que nos ayuda a crear un menú con css similar a los de Javascript.
<br>
<br>
El siguiente estilo nos permite crear un menú similar a los de javascript, en donde representamos su estado de reposo (out) con un color y su estado sobre (over) con otro.
</div>
</div>
</div>
</body>
</html>
Funciona correctamente, pero prueba a aumentar el texto de la capa principal... si pones más texto del que cabe en una ventana, se pierde por la parte de arriba y no se puede visualizar. En Mozilla me funciona perfectamente.
Existen otros ejemplos que me han gustado. Son más simples aunque no sirven para todos los casos y sólo nos solucinan el problema parcialmente. Los comento por si te sirven de algo:
- Centrado del texto de una capa, siempre y cuando este texto tenga una sóla línea:
http://wellstyled.com/css-single-line-vertical-centering.html
- Centrado de todo el contenido de la página, aunque para un ancho fijo del documento. Es decir, si la página tiene más contenidos que el espacio reservado, la solución deja de funcionar:
http://vmalek.murphy.cz/