编辑:

如果这个问题教会了我什么，那就是:不要改变已经有效的东西:)

我提供了一个(几乎)一字不差的副本，这是如何处理http://www.jakpsatweb.cz/css/css-vertical-center-solution.html -这是严重黑客的IE，但提供了一个纯CSS的方式来回答这个问题:

.container {display:table; height:100%; position:absolute; overflow:hidden; width:100%;}
.helper    {#position:absolute; #top:50%;
            display:table-cell; vertical-align:middle;}
.content   {#position:relative; #top:-50%;
            margin:0 auto; width:200px; border:1px solid orange;}

小提琴:http://jsfiddle.net/S9upd/4/

我在浏览器中运行了这个，看起来很好;如果没有别的原因，我将保留下面的原始内容，以便按照CSS规范规定的保证金百分比处理。

原:

看来我要迟到了!

上面有一些评论认为这是一个CSS问题——关注点的分离。让我先说一句，CSS在这个问题上搬起石头砸自己的脚。我的意思是，这样做有多简单:

.container {
    position:absolute;
    left: 50%;
    top: 50%;
    overflow:visible;
}
.content {
    position:relative;
    margin:-50% 50% 50% -50%;
}

对吧?容器的左上角将位于屏幕的中心，如果边框为负，内容将神奇地重新出现在页面的绝对中心!http://jsfiddle.net/rJPPc/

错了!水平定位是可以的，但垂直…哦，我明白了。显然，在css中，当设置顶部边距为%时，该值总是以相对于包含块宽度的百分比计算。就像苹果和橘子一样!如果你不相信我或Mozilla doco，可以通过调整内容宽度来玩上面的小提琴，你会惊讶的。

现在，CSS是我的面包和黄油，我不打算放弃。同时，我喜欢简单的东西，所以我借用了捷克CSS大师的发现，并使其成为一个工作小提琴。长话短说，我们创建了一个表，其中vertical-align设置为中间:

<table class="super-centered"><tr><td>
    <div class="content">
        <p>I am centered like a boss!</p>
    </div>
</td></tr></table>

并且比内容的位置微调了好老距:0 auto;:

.super-centered {position:absolute; width:100%;height:100%;vertical-align:middle;}
.content {margin:0 auto;width:200px;}​

工作提琴承诺:http://jsfiddle.net/teDQ2/

有很多方法可以做到。我的对象被display:none隐藏在BODY标签中，以便定位相对于BODY。在使用$ (" # object_id”),告诉(),我叫美元(“# object_id”).center ()

我使用position:absolute，因为这是可能的，特别是在一个小型移动设备上，模式窗口比设备窗口大，在这种情况下，如果定位是固定的，一些模式内容可能是不可访问的。

以下是根据其他人的回答和我的具体需求我的口味:

$.fn.center = function () {
        this.css("position","absolute");

        //use % so that modal window will adjust with browser resizing
        this.css("top","50%");
        this.css("left","50%");

        //use negative margin to center
        this.css("margin-left",(-1*this.outerWidth()/2)+($(window).scrollLeft())+"px");
        this.css("margin-top",(-1*this.outerHeight()/2)+($(window).scrollTop())+"px");

        //catch cases where object would be offscreen
        if(this.offset().top<0)this.css({"top":"5px","margin-top":"0"});
        if(this.offset().left<0)this.css({"left":"5px","margin-left":"0"});

        return this;
    };

我想纠正一个问题。

this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");

以上代码在这种情况下将不起作用。height(假设用户调整屏幕大小，内容是动态的)和scrollTop() = 0，示例:

窗口。高度是600 这一点。高度是650

600 - 650 = -50  

-50 / 2 = -25

现在方框在屏幕外的中心位置为-25。

我喜欢添加函数到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();

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

这个功能的转换组件在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);

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

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