Центрирование div-элемента на странице: решение jQuery

Быстрый ответ

Для центрирования DIV на экране с применением jQuery, установите блоку атрибуты position: fixed и рассчитайте значения top и left, обеспечив их выравнивание по центру окна с помощью transform: translate(-50%, -50%):

$(window).on('load resize', function() {
    var $div = $('#yourDivId');
    $div.css({
        'position': 'fixed',
        'left': '50%',
        'top': '50%',
        'transform': 'translate(-50%, -50%)'
    });
});

Данный метод позволяет автоматически центрировать DIV при загрузке страницы и при её масштабировании. Не забудьте подставить вместо #yourDivId идентификатор вашего DIV.

Особенности реализации в реальных условиях (расширение окна и сдвиг при прокрутке)

Адаптация при масштабировании окна

Учитывая различную диагональ экранов, ключевым моментом является центрирование DIV при расширении или сужении окна браузера:

$(window).resize(function() {
    centerDiv();
}).resize(); // Хорошее впечатление имеет значение.

function centerDiv() {
    var $div = $('#yourDivId'); // Это ваш DIV!
    $div.css({
        'position': 'fixed',
        'left': '50%',
        'top': '50%',
        'transform': 'translate(-50%, -50%)'
    });
}

Подробнее об этом расскажет наш спикер на видео

Устойчивость к прокрутке

DIV должен оставаться в центре независимо от прокрутки страницы. Следующий код позволяет сдвигать его:

$(window).on('load scroll resize', function() {
    var $div = $('#yourDivId'); // Это все ещё ваш DIV!
    var windowWidth = $(window).width();
    var windowHeight = $(window).height();
    var divWidth = $div.outerWidth();
    var divHeight = $div.outerHeight();
    var leftPosition = Math.max((windowWidth – divWidth) / 2 + $(window).scrollLeft(), 0);
    var topPosition = Math.max((windowHeight – divHeight) / 2 + $(window).scrollTop(), 0);
    // Используем Math.max, чтобы избежать отрицательных значений!

    $div.css({
        'position': 'absolute',
        'left': leftPosition,
        'top': topPosition
    });
});

Универсальный плагин для центровки

Проведите время с пользой, используйте плагин jQuery для многократного применения функции центрирования:

$.fn.center = function () {
    this.css("position","fixed");
    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;
}

$('#yourDivId').center(); // Готово! Ваш DIV теперь остается центрированным, как Земля в космосе.

Отзывчивые и динамические условия

Переменные размеры

Учитывая различия в размерах экранов, мы используем проценты для ширины в CSS, чтобы <div> подходил для любого разрешения:

#yourDivId {
  width: 50%; /* Настраивается в зависимости от ваших потребностей */
  height: auto; /* Сохраняем пропорции */
}

jQueryUI – дополнительные навыки

Для сложных взаимодействий используйте функцию Position из jQueryUI для детального контроля над позиционированием:

$("#yourDivId").position({
  my: "center",
  at: "center",
  of: window // Центрирование относительно браузерного окна!
});

Визуализация

Представьте задачу так, словно вы декорируете стеклянное окно снежинкой-наклейкой во время праздничного сезона:

🖼️ = Ваша снежинка
🏙️ = Окно

Пример рисунка:

+-------------------------------------+
|                                     |
|              🖼️❄️                  |
|        (Центр окна)                 |
|                                     |
+-------------------------------------+

Довольно просто, не правда ли? Ваша снежинка должна оставаться в центре окна, вне зависимости от того, как вы её расположите:

div {
  position: fixed;
  width: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

Работа с особенностями и деталями

Негативный отступ? Не сегодня!

Если окно меньше DIV, получается отрицательное значение отступа. Math.max помогает нам сохранить отступ в положительной зоне:

left: Math.max(0, (windowWidth – divWidth) / 2),
top: Math.max(0, (windowHeight – divHeight) / 2)

Фиксированное позиционирование при прокрутке

Для того чтобы DIV всегда находился в центре при прокрутке, используйте фиксированное позиционирование:

#yourDivId {
  position: fixed; // Неудвижно!
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Альтернативы без jQuery

Если вы предпочитаете чистый CSS, то используйте CSS3 для решения задачи:

#yourDivId {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

Ваш DIV теперь центрирован, как профессионалу и полагается!

Полезные материалы

1. Метод jQuery .css() — официальная документация по стилизации элементов, без которой центрирование DIV было бы невозможным.
2. Руководство по центрированию от CSS Tricks — подробное пособие по применению CSS для центрирования элементов.
3. MDN Web Docs о Flexbox — flexbox для центрирования элементов, современный подход к верстке.
4. Объяснение единиц Viewport — ключ к отзывчивому и точному центрированию с использованием единиц viewport.
5. Подробности о свойстве Position — глубокое понимание абсолютного и фиксированного позиционирования поможет вам в центрировании.
6. Метод jQuery window.resize() — поможет сохранять ваш DIV в центре при изменении размера окна.
7. Изучение jQuery — интерактивные уроки и практические примеры для быстрого освоения jQuery.