Alignement vertical en CSS?

Question

Donc, je sais tout sur les problèmes avec vertical-align: middle; et les différentes méthodes que les gens ont utilisé pour aligner verticalement des éléments en CSS. Mais je n'en ai pas trouvé un qui fonctionne pour ce dont j'ai besoin pour lequel travailler.

Fondamentalement, ma page a juste un <div> dessus, que je veux placé dans le centre de la page, horizontalement et verticalement. Évidemment, la partie horizontale est facile, mais je suis accroché à la partie verticale. Mon problème est que la hauteur du <div> est inconnue; le contenu change, donc je ne peux pas spécifier une hauteur pour cela.

Quelqu'un at-il des conseils pour moi? Je suis prêt à utiliser JavaScript si nécessaire. Merci!

Answer 1

En bref, vous avez need two divs pour obtenir un centrage vertical uniquement CSS.

Avec Javascript, vous pouvez do it with a single div, cependant.

Answer 2

Comme vous avez dit que vous ne me dérange pas en utilisant JS, ici il est ... (je REPLI généralement jamais à une solution JS, mais si vous êtes cool avec elle, alors je suis donc)

Si votre CSS est

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

Ensuite, vous pouvez utiliser mon ami jQuery

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

{); 

Remarque, ce n'est pas testé, mais devrait être un début. Espérons que la hauteur/2 fonctionnera comme prévu, sinon, essayez d'utiliser parseInt();