之所以会出现这种糟糕的过渡，是因为每次滚动文档时都要调整元素的位置。你想要的是使用固定的定位。我尝试了上面列出的固定中心插件，这似乎解决了这个问题很好。固定定位允许您将一个元素居中一次，CSS属性将在您每次滚动时为您维护该位置。

通常，我只会用CSS做这个…但是既然你问你一个方法来做这个用jQuery…

下面的代码将一个div在其容器内水平和垂直地居中:

$("#target").addClass("centered-content") .wrap("<div class='center-outer-container'></div>") .wrap("<div class='center-inner-container'></div>"); body { margin : 0; background: #ccc; } .center-outer-container { position : absolute; display: table; width: 100%; height: 100%; } .center-inner-container { display: table-cell; vertical-align: middle; text-align: center; } .centered-content { display: inline-block; text-align: left; background: #fff; padding : 20px; border : 1px solid #000; } <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.1.min.js"></script> <div id="target">Center this!</div>

(也可以参看这把小提琴)

我喜欢添加函数到jQuery，所以这个函数会有帮助:

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

现在我们可以写成:

$(element).center();

演示:小提琴(添加参数)

这太棒了。我添加了一个回调函数

center: function (options, callback) {

if (options.transition > 0) {
   $(this).animate(props, options.transition, callback);
} else { 
    $(this).css(props);
   if (typeof callback == 'function') { // make sure the callback is a function
       callback.call(this); // brings the scope to the callback
   }
}

这是我的尝试。我最终在我的Lightbox克隆版本中使用了它。这种解决方案的主要优点是，即使窗口大小被调整，元素也会自动保持居中，这是这种用法的理想选择。

$.fn.center = function() {
    this.css({
        'position': 'fixed',
        'left': '50%',
        'top': '50%'
    });
    this.css({
        'margin-left': -this.outerWidth() / 2 + 'px',
        'margin-top': -this.outerHeight() / 2 + 'px'
    });

    return this;
}

这可以只用CSS来完成。但他们是用jQuery或JavaScript问的

在这里，使用CSS Flex box属性来对齐div中心。

body.center{
  display:flex;
  align-items:center; // Vertical alignment
  justify-content:center; // Horizontal alignment
}

对齐项目:中心;-用于垂直对齐。

justify-content:中心;-用于水平对齐。

document.querySelector .classList.add(“身体”)(“中心”); 身体{ Margin: 0; 身高:100 vh; 宽度:100%; 背景:# ccc; ｝ #{主要 背景:# 00 cc00; 宽度:100 px; 身高:100 px; ｝ body.center { 显示:flex; 对齐项目:中心; justify-content:中心; ｝ <身体> < div id = "主" > < / div > < /身体>