Javascript 如何使用jQuery在页面中间将div集中在窗口大小重新定位时保持中心？ 是否有人知道任何一个jQuery脚本，将保持一个div以中间为中心，当窗口被重新调整大小时，它也将保持它为中心？我正在建造一个灯箱插件，我需要它停留在中间。我尝试过使用CSS，但它不起作用 另外，当另一个盒子有更大的宽度和高度时，我需要它停留在中间。这是一页，上面有一些例子：

先打开图像，然后打开div，你就会明白我的意思了。div未居中。但当您关闭并重新打开div时，它会居中，因为当您单击WowBox链接时会出现.center（）。我只需要它始终居中，永远不要像那样一团糟

以下是我当前用于将其居中的代码：

  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;
  }

我想让它在窗口重新调整大小时保持居中。我还想让它，当盒子的宽度变宽，高度变高时，它会重新居中。现在它不能正常工作

有人能帮忙吗

提前感谢,

内森

----------------工作---------------------

CSS

.外部{ 高度：200px； 宽度：400px； 边框：2个点红色； }

HTML

---

如果这不符合你的要求，请告诉我。

---

您甚至可以看到，调整内部div的大小仍然可以使外部div保持居中。

请与您已有的示例代码一起尝试。请澄清：

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;
}

$(document).ready(function(){
   $('.element').center();
   window.onresize = function(event) {
        $('.element').center();
    }
});

---

对于固定尺寸配合示例

请尝试$（this）.height（）而不是this.outerHeight（），除非我理解您的需求，否则我的css解决方案是有效的incorrectly@Kamil我试过了，但没用。请告诉我有什么问题？它不在中间，使它在中间吗？你提供的解决方案不工作，它不是垂直居中。第一个是工作，第二个不是。但是我喜欢CSS方法。第二种方法只有在.box高度不变的情况下才有效。问题是：“…我还想让它在盒子的宽度变宽，高度变高时，它会重新居中…”然后只需添加

$（function（）{$（.box”）.css（$（.box”）.height（）/2））；$（.box”）.css（$（.box”）、-（$（.box”）.width（）/2））。。。很简单？我认为CSS和最小的jquery比所有的jquery都好。他上面的函数是作为插件编写的！那为什么要投否决票呢？他的示例代码的用法是.center（）；有什么我没有得到的吗？为什么不只用css呢？你的css解决方案看起来确实不错。跨浏览器工作吗？我选择了jQuery选项，标题是“如何使用jQuery在页面中间将div放在中间，并在窗口重新调整大小时保持中心”？这看起来应该行得通。我现在就去试试。
<div class="outer">
<div class="inner">
    <div class="box">
        wpfw efuiweh fuiwehf weuifh weuifh fuihwe fuihwefuiweh uwehf iuwehf uiwefhweuifh weuifhwe fuiweh fuiwehfuiwefh uiwefh weuifh weuifh weuifhwe uifh weuifhwefuiweh fuiweh fuiwehf iweufh weuih
    </div>
</div>
</div>

$(function(){
    $(".box").css('top',-($(".box").height()/2));
    $(".box").css('left',-($(".box").width()/2));
});

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;
}

$(document).ready(function(){
   $('.element').center();
   window.onresize = function(event) {
        $('.element').center();
    }
});