Как можно разместить DIV по центру экрана на jQuery?

Вопрос

В общем-то сабж.


Ответ №1

Я бы сделал отдельную функцию:

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

Использовать её просто и приятно:

$(element).center();

4 комментария

  • Саня:

    чёто не работает нихера… jquery 1.7.2

  • Всё должно быть по центру:

    Вот рабочая функция

    jQuery.fn.center = function () {
    this.css({«position»: «absolute»});
    this.css({«top»: (($(window).height() — this.outerHeight()) / 2) + $(window).scrollTop() + «px»});
    this.css({«left»: (($(window).width() — this.outerWidth()) / 2) + $(window).scrollLeft() + «px»});
    return this;
    }
    $(document).ready(function() {
    $(«.element»).center();
    });

  • Oleg_S:

    А если нужно по центру вьюпорта разместить, а не всей страницы? Страница длинная, в несколько экранов. Если вверху или внизу страницы находимся, то сообщение вообще не видно будет…

  • Oleg_S:

    Извиняюсь, туплю )))

Добавить комментарий


(обязательно)