¿Alineación vertical en CSS?

Question

Así que sé todo acerca de los problemas con vertical-align: middle; y los diferentes métodos que la gente ha utilizado para alinear elementos verticalmente en CSS.Pero no he encontrado uno que funcione para lo que necesito.

Básicamente mi página tiene solo uno. <div> en él, que quiero posicionar en el centro de la página, tanto horizontal como verticalmente.Obviamente la parte horizontal es fácil, pero me estoy quedando bloqueado con la parte vertical.Mi problema es que la altura del <div> es desconocido;el contenido cambia, por lo que no puedo especificar una altura.

¿Alguien tiene algún consejo para mí?Estoy dispuesto a utilizar JavaScript si es necesario.¡Gracias!

Answer 1

Larga historia corta, necesita dos divs para obtener un centrado vertical solo CSS.

Con Javascript, puede hacerlo con un solo div .

Answer 2

Como dijiste que no te importa usar JS, aquí está ... (generalmente nunca recurro a una solución JS, pero si estás de acuerdo con ella, entonces yo también lo estoy)

Si tu CSS es

#element {
    position: absolute;
    top: 50%;
}

Entonces podrías usar mi amigo jQuery

$(document).ready(function() {
    var height = $('#element').height();
    $('#element').css({marginTop: '-' + (height / 2) + 'px'})

{);

Nota, esto no se ha probado, pero debería ser un comienzo. Esperemos que la altura / 2 funcione como se esperaba, si no, intente usar parseInt();