Блог

Это работает:

 $.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();
  

.. но элемент остается в том же положении, если размер окна изменен, как мне центрировать его при изменении размера тоже?

Спасибо

Вам нужно будет выполнить этот код в событии window resize. Но, если размер браузера изменен, это событие срабатывает с огромной силой! Так что в целом неплохо создать небольшой «балансировщик».

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

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

Это поглотит множество событий, которые запускаются при изменении размера окна браузера. Фактически, он вызывает .center() только с интервалом не более 200 мс. Вероятно, вам следует даже увеличить это значение и кэшировать ссылку узла на #container элемент.

Редактировать::

присвоение процента top и left можно поместить в центр. но это плохо… действительно, очень плохо.

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

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

В jsfiddle.