中心調整大小過於

Question

這工作：

$.fn.center = function() { 
    this.css("position", "absolute"); 
    this.css("top", ($(window).height() - this.height())/2 + $(window).scrollTop() + "px"); 
    this.css("left", ($(window).width() - this.width())/2 + $(window).scrollLeft() + "px"); 
    return this 
}; 
$('#container').center(); 

..但該元素停留在相同的位置，如果窗口大小，我該如何與調整大小過於居中？

感謝

Answer 1

您需要在window執行該代碼調整事件。但是，如果瀏覽器被重新調整大小，這個事件就會激化！因此，創建一個「平衡器」通常是一個好主意。

$(window).bind('resize', function() { 
    var that = this;   

    if(!('balancer' in that)) { 
     that.balancer = setTimeout(function() { 
      $('#container').center(); 
      delete that.balancer; 
     }, 200); 
    } 
}); 

這將吸收調整瀏覽器窗口大小時觸發的許多事件。實際上，它只能在最長200ms時調用.center()。您甚至應該增加該值並將節點引用緩存到#container元素。

Answer 2

編輯 ::

捐贈百分比top和left可以把在中心。但是這個糟糕......真的很糟糕。

$.fn.center = function() { 
     $(this).css({'position': 'absolute', 
        'top': '40%', 
        'left': '40%' 
        }); 
    }; 

    $(function(){ 
     $('#container').center(); 
    }) 

對jsfiddle。