你可以使用CSS translate属性:

position: absolute;
transform: translate(-50%, -50%);

阅读这篇文章了解更多细节。

这个功能的转换组件在Chrome中工作得非常糟糕(没有在其他地方测试)。我会调整窗口的大小，我的元素会慢慢移动，试图赶上。

因此下面的函数注释了这一部分。此外，我还添加了参数，用于传入可选的x和y布尔值，如果你想垂直居中，而不是水平居中，例如:

// Center an element on the screen
(function($){
  $.fn.extend({
    center: function (x,y) {
      // var options =  $.extend({transition:300, minX:0, minY:0}, options);
      return this.each(function() {
                if (x == undefined) {
                    x = true;
                }
                if (y == undefined) {
                    y = true;
                }
                var $this = $(this);
                var $window = $(window);
                $this.css({
                    position: "absolute",
                });
                if (x) {
                    var left = ($window.width() - $this.outerWidth())/2+$window.scrollLeft();
                    $this.css('left',left)
                }
                if (!y == false) {
            var top = ($window.height() - $this.outerHeight())/2+$window.scrollTop();   
                    $this.css('top',top);
                }
        // $(this).animate({
        //   top: (top > options.minY ? top : options.minY)+'px',
        //   left: (left > options.minX ? left : options.minX)+'px'
        // }, options.transition);
        return $(this);
      });
    }
  });
})(jQuery);

为了使元素相对于浏览器视窗居中，不要使用position: absolute，正确的位置值应该是固定的(absolute的意思是:“元素的位置相对于它的第一个定位(不是静态的)祖先元素”)。

这个中心插件的替代版本使用“%”而不是“px”，所以当你调整窗口大小时，内容保持居中:

$.fn.center = function () {
    var heightRatio = ($(window).height() != 0) 
            ? this.outerHeight() / $(window).height() : 1;
    var widthRatio = ($(window).width() != 0) 
            ? this.outerWidth() / $(window).width() : 1;

    this.css({
        position: 'fixed',
        margin: 0,
        top: (50*(1-heightRatio)) + "%",
        left: (50*(1-widthRatio))  + "%"
    });

    return this;
}

你需要把margin: 0从宽度/高度中排除内容边距(因为我们使用的是位置固定，有边距没有意义)。 根据jQuery文档使用. outerwidth (true)应该包括边缘，但当我在Chrome中尝试时，它没有像预期的那样工作。

50*(1比)来自:

窗口宽度:W = 100%

元素宽度(%):w = 100 * elementWidthInPixels/windowWidthInPixels

它们计算左边居中:

 left = W/2 - w/2 = 50 - 50 * elementWidthInPixels/windowWidthInPixels =
 = 50 * (1-elementWidthInPixels/windowWidthInPixels)

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

CSS解决方案 只有两行

它集中你的内部div水平和垂直。

#outer{
  display: flex;
}
#inner{
  margin: auto;
}

对于仅水平对齐，更改

margin: 0 auto;

对于垂直方向，改变

margin: auto 0;

我用这个:

$(function() {
   $('#divId').css({
    'left' : '50%',
    'top' : '50%',
    'position' : 'absolute',
    'margin-left' : -$('#divId').outerWidth()/2,
    'margin-top' : -$('#divId').outerHeight()/2
  });
});