Использование jQuery для центрирования DIV на экране

Question

Как мне установить <div> в центре экрана с помощью jQuery?

Answer 1

Мне нравится добавлять функции в jQuery, чтобы эта функция помогла:

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

Теперь мы можем просто написать:

$(element).center();

Демо: Fiddle (с добавленным параметром)

Answer 2

Я поставил jquery плагин здесь

ОЧЕНЬ КРАТКАЯ ВЕРСИЯ

$('#myDiv').css({top:'50%',left:'50%',margin:'-'+($('#myDiv').height() / 2)+'px 0 0 -'+($('#myDiv').width() / 2)+'px'});

КОРОТКАЯ ВЕРСИЯ

(function($){
    $.fn.extend({
        center: function () {
            return this.each(function() {
                var top = ($(window).height() - $(this).outerHeight()) / 2;
                var left = ($(window).width() - $(this).outerWidth()) / 2;
                $(this).css({position:'absolute', margin:0, top: (top > 0 ? top : 0)+'px', left: (left > 0 ? left : 0)+'px'});
            });
        }
    }); 
})(jQuery);

Активируется этим кодом:

$('#mainDiv').center();

ВЕРСИЯ ПЛАГИНА

(function($){
     $.fn.extend({
          center: function (options) {
               var options =  $.extend({ // Default values
                    inside:window, // element, center into window
                    transition: 0, // millisecond, transition time
                    minX:0, // pixel, minimum left element value
                    minY:0, // pixel, minimum top element value
                    withScrolling:true, // booleen, take care of the scrollbar (scrollTop)
                    vertical:true, // booleen, center vertical
                    horizontal:true // booleen, center horizontal
               }, options);
               return this.each(function() {
                    var props = {position:'absolute'};
                    if (options.vertical) {
                         var top = ($(options.inside).height() - $(this).outerHeight()) / 2;
                         if (options.withScrolling) top += $(options.inside).scrollTop() || 0;
                         top = (top > options.minY ? top : options.minY);
                         $.extend(props, {top: top+'px'});
                    }
                    if (options.horizontal) {
                          var left = ($(options.inside).width() - $(this).outerWidth()) / 2;
                          if (options.withScrolling) left += $(options.inside).scrollLeft() || 0;
                          left = (left > options.minX ? left : options.minX);
                          $.extend(props, {left: left+'px'});
                    }
                    if (options.transition > 0) $(this).animate(props, options.transition);
                    else $(this).css(props);
                    return $(this);
               });
          }
     });
})(jQuery);

Активируется этим кодом:

$(document).ready(function(){
    $('#mainDiv').center();
    $(window).bind('resize', function() {
        $('#mainDiv').center({transition:300});
    });
);

это верно?

ОБНОВЛЕНИЕ:

Из CSS-хитрости

.center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); /* Yep! */
  width: 48%;
  height: 59%;
}

Answer 3

Я бы порекомендовал jQueryUI Положение утилиты

$('your-selector').position({
    of: $(window)
});

, что дает вам гораздо больше возможностей, чем только центрирование ...

Answer 4

Вот мой путь. Я закончил тем, что использовал это для своего клона Лайтбокса. Основным преимуществом этого решения является то, что элемент будет центрироваться автоматически, даже если размер окна изменяется, что делает его идеальным для такого рода использования.

$.fn.center = function() {
    this.css({
        'position': 'fixed',
        'left': '50%',
        'top': '50%'
    });
    this.css({
        'margin-left': -this.outerWidth() / 2 + 'px',
        'margin-top': -this.outerHeight() / 2 + 'px'
    });

    return this;
}

Answer 5

Вы можете использовать только CSS для центрирования следующим образом:

Рабочий пример

.center{
    position: absolute;
    height: 50px;
    width: 50px;
    background:red;
    top:calc(50% - 50px/2); /* height divided by 2*/
    left:calc(50% - 50px/2); /* width divided by 2*/
}

<div class="center"></div>

calc() позволяет выполнять базовые вычисления в CSS.

Документация MDN для calc()
Таблица поддержки браузера

Answer 6

Я расширяю замечательный ответ, данный @TonyL. Я добавляю Math.abs () для переноса значений, а также принимаю во внимание, что jQuery может находиться в режиме «без конфликтов», как, например, в WordPress.

Я рекомендую вам обернуть верхнее и левое значения с помощью Math.abs (), как я сделал ниже. Если окно слишком маленькое, а ваш модальный диалог имеет верхнее окно закрытия, это предотвратит проблему, когда вы не увидите закрывающее окно. Функция Тони имела бы потенциально отрицательные значения. Хороший пример того, как вы получите отрицательные значения, - это если у вас большой центрированный диалог, но конечный пользователь установил несколько панелей инструментов и / или увеличил свой шрифт по умолчанию - в таком случае, окно закрытия в модальном диалоге (если вверху) может быть невидимым и кликабельным.

Другая вещь, которую я делаю, это немного ускоряет это, кэшируя объект $ (window), чтобы я сократил лишние обходы DOM и использовал кластерный CSS.

jQuery.fn.center = function ($) {
  var w = $(window);
  this.css({
    'position':'absolute',
    'top':Math.abs(((w.height() - this.outerHeight()) / 2) + w.scrollTop()),
    'left':Math.abs(((w.width() - this.outerWidth()) / 2) + w.scrollLeft())
  });
  return this;
}

Чтобы использовать, вы должны сделать что-то вроде:

jQuery(document).ready(function($){
  $('#myelem').center();
});

Answer 7

Я бы использовал функцию jQuery UI position.

См. Рабочую демонстрацию .

<div id="test" style="position:absolute;background-color:blue;color:white">
    test div to center in window
</div>

Если у меня есть div с id «test» для центрирования, то следующий скрипт будет центрировать div в окне на готовом документе. (значения по умолчанию для «my» и «at» в опциях положения «center»)

<script type="text/javascript">
$(function(){
  $("#test").position({
     of: $(window)
  });
};
</script>

Answer 8

Я бы хотел исправить одну проблему.

this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");

Вышеупомянутый код не будет работать в случаях, когда this.height (допустим, что пользователь изменяет размер экрана, а содержимое динамично) и scrollTop() = 0, пример:

window.height - это 600
this.height является 650

600 - 650 = -50  

-50 / 2 = -25

Теперь поле центрировано -25 за кадром.

Answer 9

Я не думаю, что лучше иметь абсолютную позицию, если вы хотите, чтобы элемент всегда находился по центру страницы. Вы, вероятно, хотите фиксированный элемент. Я нашел другой плагин для центрирования jquery, который использовал фиксированное позиционирование. Он называется фиксированный центр .

Answer 10

Это не проверено, но что-то вроде этого должно работать.

var myElement = $('#myElement');
myElement.css({
    position: 'absolute',
    left: '50%',
    'margin-left': 0 - (myElement.width() / 2)
});