如何使用 jQuery 在页面中间居中 div 并在重新调整窗口大小时保持居中？答案

【问题标题】：How do I center a div in the middle of the page using jQuery and keep it centered when window is re-sized?如何使用 jQuery 在页面中间居中 div 并在重新调整窗口大小时保持居中？
【发布时间】：2011-10-10 20:41:57
【问题描述】：

有谁知道任何 jQuery 脚本可以让 div 居中居中，并且当窗口重新调整大小时，它也会保持居中？我正在构建一个灯箱插件，我需要它保持在中间。我尝试使用 CSS，但它不起作用。

当打开另一个具有更大宽度和高度的盒子时，我还需要它保持在中间。这是带有示例的页面：

http://wowbox.yolasite.com/

先打开图片，再打开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;
  }

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

有人可以帮忙吗？

提前致谢，

内森

【问题讨论】：

试试 $(this).height() 而不是 this.outerHeight()
我的 css 解决方案有效，除非我不正确地理解你想要什么
@Kamil Szot 我试过了，但没用。

标签： javascript jquery css plugins positioning

【解决方案1】：

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

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

【讨论】：

他上面的功能是写成插件的！那么为什么要投反对票呢？他的示例代码的用法是 .center();
有什么我没有得到的吗？为什么不只使用 css？
您的 CSS 解决方案实际上看起来不错。这可以跨浏览器工作吗？我选择了 jQuery 选项，因为问题的标题是“如何使用 jQuery 在页面中间居中 div 并在调整窗口大小时保持居中？”
@kieran 感谢您的回答。看起来它应该工作。我马上去试试。

【解决方案2】：

-----------------This 工作---------------------

CSS

       .box{
    width:200px;
    top:-5px; 

    position:relative;
    background:#444;
}
.inner {
    height:0px;
    width:0px;
    background:#444;
    top:50%;
    left:50%;
    right:50%;
    bottom:50%;
    position:relative;
}

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

HTML

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

jQuery

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

如果这不符合您的要求，请告诉我。您甚至可以在 http://jsfiddle.net/mazlix/m4Ttk/2/ 上看到调整内部 div 的大小仍会使其保持居中。

【讨论】：

请告诉我这有什么问题？它不是居中并位于中间吗？
您提供的解决方案不起作用，它没有垂直居中。
第一个有效，第二个无效。但我喜欢 CSS 方法
第二个只有在 .box 高度不变的情况下才会起作用。问题是：“......我还想在盒子的宽度变宽和高度变高时让它重新居中......”
然后添加$(function(){ $(".box").css('top',-($(".box").height()/2)); $(".box").css('left',-($(".box").width()/2)); }); ... 很简单吗？我认为 CSS 和最小的 jquery 比所有的 jQuery 都好

【解决方案3】：

对于固定尺寸适合示例http://jsfiddle.net/expert/vh2vy/5/

【讨论】：