Centrado verticalmente div dentro de otro

dalfeju · #1 (**permalink**) 09/01/2012, 14:05

Deseo centrar verticalmente un Div dentro de otro, pero no lo consigo :\

La cuestión es que el div no tendrá tamaño fijo debido a que depende del contenido que se le introduzca, así que no puedo utilizar line-height, ni mucho menos centrarlo asignándole valores al top.

Por otro lado, está la propiedad vertical-align, pero para ello debo asignarle al div display: table-cell y al momento de hacerlo se descuadra todo:

Código HTML:

Ver originalCopiar<html>
<head>
<title>Centrado</title>
<style>
html, body {
    margin: 0;
    color: #000;
}
 
#contenedor{
    height: 100%;
    background: #aaa;
    text-align: center;
}
 
#mensaje {
    background: #ccc;
}
 
</style>
</head>
 
<body>
<div id='contenedor'>
    <div id='mensaje'>
        Texto 1.<br />
        Texto 2.<br />
        Texto 3.<br /><br />
        Texto 4.<br />
        Texto 5.<br />
        Texto 6.
    </div>
</div>
</body>
</html>