Centre vertical un div sur une page

Question

J'ai une question. Je veux aligner un div sur le centre vertical de la fenêtre du navigateur. Je comprends comment faire cela et j'ai écrit du code moi-même. Mais il y a une chose qui ne fonctionne pas:

// fetch al info I need 
var windowHeight = $(window).height(); 
var pageTop = $(window).scrollTop(); 
var modalHeight = "98"; 

// Get the centre of the window 
var divTop = (windowHeight - modalHeight)/2; 
// Add the scrollTop so the div will align in the middle of my current browser viewport  
var divTop = divTop + pageTop; 
var divTop = divTop + "px"; 
$('#modal_placeholder').css('top',divTop); 

Maintenant, le problème est qu'il ne sera pas obtenir la valeur correcte scrollTop ... il dit toujours qu'il est 0, comme vous êtes en haut de la page .

Pouvez-vous m'aider?

Answer 1

Vous pouvez utiliser un élément TABLE: http://vidasp.net/CSS_Centering-horizontally-and-vertically.html

Answer 2

$(window).scrollTop() Retours loin sur la page que vous avez fait défiler. Essayez de taper ceci dans votre barre d'adresse que vous êtes dans des positions différentes sur la page

javascript:alert($(window).scrollTop()); 

Modifier (toute la page.): Il semble que vous savez déjà cela. Le problème est que la variable n'est pas mise à jour. Lorsque la page se charge, $(window).scrollTop() a la valeur 0. Pour mettre à jour la valeur, essayez de lier un événement à la mise à jour de cette valeur.

Answer 3

Si vous voulez faire est js à sens unique, vous pouvez le faire par exemple comme ça:

var d = $(your_div), 
    div_height = d.height(); 

d.css({ 
    position: 'absolute', 
    top: '50%', 
    margin: '-' + (div_height/2) + 'px 0 0 0' 
})