中心也调整大小

Question

这有效：

$.fn.center = function () {
    this.css("position", "absolute");
    this.css("top", ($(window).height() - this.height()) / 2 + $(window).scrollTop() + "px");
    this.css("left", ($(window).width() - this.width()) / 2 + $(window).scrollLeft() + "px");
    return this
};
$('#container').center();

..但是如果调整窗口大小，元素会保持在同一位置，如何将其与调整大小对齐？

由于

Answer 1

您需要在window 调整大小事件中执行该代码。但是，如果浏览器调整大小，这个事件会发生巨大的爆炸！因此，创建一个小“平衡器”通常是一个好主意。

$(window).bind('resize', function() {
    var that = this;        

    if(!('balancer' in that) ) {
        that.balancer = setTimeout(function() {
            $('#container').center();
            delete that.balancer;
        }, 200);
    }
});

这将吸收调整浏览器窗口大小时触发的许多事件。实际上，它只调用.center()最多200ms。您甚至可能应该增加该值并将节点引用缓存到#container元素。

Answer 2

修改 ::

给top和left的百分比可以放在中心位置。但这很糟糕......非常糟糕。

    $.fn.center = function () {
        $(this).css({'position': 'absolute',
                     'top': '40%',
                     'left': '40%'
                    });
    };

    $(function (){
        $('#container').center();
    })

在jsfiddle。