Как можно разместить 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();

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

  • Саня:

    чёто не работает нихера… 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:

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

  • nnikast:

    Пройдите 1 регистрацию, сделайте 2 действия
    и получайте от 8950 рублей каждые сутки в автоматическом режиме.

    Мы гарантируем:
    - Первый заработок в течении 60 минут.
    - Стабильный доход 24 часа в сутки.
    - Поступление денег без задержек.
    - Для России, стран СНГ и Европы.
    - Без вложений и установки ПО.
    - Специально для новичков и людей без опыта.

    Более подробная информация на нашем сайте. ( http://prosto.zarplatt.ru/ )

  • Сазонов Виктор:

    Немного подправил для fixed работает такой вид!

    jQuery.fn.center = function () {
    this.css(«position»,»fixed»);
    this.css(«top», (($(window).height() — $(this).outerHeight()) / 2) + «px»);
    this.css(«left», (($(window).width() — $(this).outerWidth()) / 2) + «px»);
    return this;
    }

  • WilliamCramy:

    13 ways to lose weight:
    https://sites.google.com/site/weightlossluxury/best-25-weight-loss-ideas-on-pinterest-weight-loss-smoothies

    Inquiries for Google:
    before and after pictures after weight loss surgery
    meal plan weight loss one week
    rapid weight loss on gluten free diet
    two day cleanse weight loss
    most effective weight loss tips
    best horse feed for weight loss
    xocai chocolate and weight loss
    water important for weight loss
    weight loss hypnotism online

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


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