如何修改这段将div居中的jQuery代码，使其即使在浏览器窗口调整大小时也居中显示？

Question

我在StackOverflow上找到了这段代码：

/* Center Dish Popup */
jQuery.fn.center = function () {
    this.css("position","absolute");
    this.css("top", (($(window).height() - this.outerHeight()) / 2) + $(window).scrollTop() + "px");
    this.css("left", (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft() + "px");
    return this;
}

$('#dish-popup').center();

它使div居中。但是，如果您调整浏览器窗口的大小，div仍然在相同的位置。我想知道如何更改代码，以便div在调整浏览器窗口大小时重新居中。

Answer 1

$(window).resize(function(){
    $('#dish-popup').center();
});

这应该会起作用。

Answer 2

从resize event调用代码

$(window).resize(function() {
  $('#dish-popup').center();
});

Answer 3

您可以始终将其包装在resize事件中：

$(window).resize(function() {
    $('#dish-popup').center();
}