jQuery的定心格到窗口垂直调整问题

Question

我使用这种方法来我的页面上垂直居中一个div：

$(window).resize(function() { 
    $('.container').css({ 
     top : ($(window).height() - $('.container').outerHeight())/2 
    }); 
}); 
$(window).resize(); 

但代码最初不工作。我无法弄清楚发生了什么，直到我在页面加载时尝试物理调整窗口大小。只要我物理调整浏览器窗口的大小，div就会立即居中。任何方式在这个？为什么这首先发生？

谢谢！

Answer 1

你需要运行负载这段代码，以及对调整

$(document).ready(function(){ 
    $('.container').css({ 
     top : ($(window).height() - $('.container').outerHeight())/2 
    }); 


    $(window).resize(function() { 
     $('.container').css({ 
      top : ($(window).height() - $('.container').outerHeight())/2 
     }); 
    }); 
}); 

Answer 2

我完成类似的代码的方式来定义中心股利（在jQuery的onDocumentReady）的辅助功能：

$(function() { 

    function _centerDiv() { 
     $('.container').css({ 
      top : ($(window).height() - $('.container').outerHeight())/2 
     }); 
    } 

    _centerDiv(); 
} 

我再挂钩到窗口的resize事件：

$(window).resize(function() { 
     _centerDiv(); 
    } 

当你想为p以编程方式触发它（在文档就绪加载中，如上所述，或任何其他事件，只需调用助手函数。

约翰

Answer 3

入住这JSBin

我添加定位：

position: 'absolute'