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'