垂直居中页面上的div

时间:2010-12-03 16:52:50

标签: javascript jquery

我有一个问题。我想在浏览器视口的垂直中心对齐一个div。我知道如何做到这一点,并自己编写了一些代码。但有一件事是行不通的:

// 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);

现在,问题是它无法获得正确的scrollTop值...它总是说它为0,就像你当前位于页面顶部一样。

你能帮帮我吗?

3 个答案:

答案 0 :(得分:1)

如果你想这样做是js-way,你可以这样做:

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

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

答案 1 :(得分:0)

答案 2 :(得分:0)

$(window).scrollTop()返回您滚动页面的距离。尝试在地址栏中输入此内容,因为您在页面上的不同位置(任何页面)。

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

编辑:看来你已经知道了。问题是变量没有更新。加载页面时,$(window).scrollTop()的值为0.要更新值,请尝试将事件绑定到更新该值。