Vertical alinhando em CSS?

Question

Então, eu sei tudo sobre os problemas com vertical-align: middle; e os diferentes métodos de pessoas têm usado para elementos alinhar verticais em CSS. Mas eu não encontrei um que trabalha para o que eu preciso para trabalhar.

Basicamente minha página tem apenas um <div> sobre ele, o que eu quero posicionado no centro da página, tanto horizontalmente quanto verticalmente. Obviamente, a parte horizontal é fácil, mas eu estou ficando pendurado na parte vertical. Meu problema é que a altura da <div> é desconhecido; as alterações de conteúdo, de modo que não é possível especificar uma altura para isso.

Alguém tem alguma dica para mim? Estou disposto a usar JavaScript, se necessário. Obrigado!

Answer 1

Para encurtar a história, você dois divs para obter CSS somente centragem vertical.

Com Javascript, você pode fazê-lo com um único div , embora .

Answer 2

Como você disse que não se importa com JS, aqui está ... (Eu geralmente não fallback para uma solução JS, mas se você está bem com isso, então eu também)

Se o seu CSS é

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

Em seguida, você poderia usar o meu amigo jQuery

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

{);

Note, este é testado, mas deve ser um começo. Esperemos que a altura / 2 funcionará como esperado, se não, tente usar parseInt();