垂直居中一页div

我有一个问题。我想将浏览器视口中垂直居中的div对齐。我明白如何做到这一点，并自己写了一些代码。但有一两件事，不工作：垂直居中一页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，像你现在在页面的顶部。

你能帮我吗？

来源

2010-12-03 Xeon

你可以使用表格元素：http://vidasp.net/CSS_Centering-horizontally-and-vertically.html

来源

2010-12-03 16:55:44

$(window).scrollTop()回报多远下跌的一页已滚动。试着输入在地址栏中这是你在页面上不同的位置是

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

编辑（任何页面。）：看来你已经知道这一点。问题是变量没有被更新。加载页面时，$(window).scrollTop()的值为0.要更新该值，请尝试绑定事件以更新该值。

来源

2010-12-03 16:56:30 wanovak

Offcourse！这是问题...它保存了页面加载的scrollTop值（当时为0）。我现在已经将它绑定到按钮上并单击它，它就可以工作！谢啦！ – Xeon 2010-12-03 17:25:42

如果你想这样做，这是JS路，你可以做这样那样：

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

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

来源

2010-12-03 16:58:03

你可以把这个方法放在一起，并链接到一个[JS小提琴]（http://jsfiddle.net/）或[JS Bin]（http://jsbin.com/）演示？ – 2010-12-03 17:04:29

垂直居中一页div

回答

相关问题