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

Question

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

Answer 1

Чтобы центрировать элемент относительно окна просмотра браузера (окна), не используйте position: absolute, правильное значение позиции должно быть fixed (абсолютно означает: «Элемент позиционируется относительно его первого позиционирования (не статично) элемент предка ").

Эта альтернативная версия предложенного централизованного плагина использует «%» вместо «px», поэтому при изменении размера окна содержимое остается центрированным:

$.fn.center = function () {
    var heightRatio = ($(window).height() != 0) 
            ? this.outerHeight() / $(window).height() : 1;
    var widthRatio = ($(window).width() != 0) 
            ? this.outerWidth() / $(window).width() : 1;

    this.css({
        position: 'fixed',
        margin: 0,
        top: (50*(1-heightRatio)) + "%",
        left: (50*(1-widthRatio))  + "%"
    });

    return this;
}

Вам нужно поставить margin: 0, чтобы исключить поля содержимого из ширины / высоты (поскольку мы используем фиксированное положение, наличие полей не имеет смысла). Согласно документу jQuery, использование .outerWidth(true) должно включать поля, но это не сработало, как я ожидал, когда я попробовал в Chrome.

50*(1-ratio) происходит от:

Ширина окна: W = 100%

Ширина элемента (в%): w = 100 * elementWidthInPixels/windowWidthInPixels

Их для расчета по центру слева:

 left = W/2 - w/2 = 50 - 50 * elementWidthInPixels/windowWidthInPixels =
 = 50 * (1-elementWidthInPixels/windowWidthInPixels)

Answer 2

Edit:

Если вопрос научил меня чему-то, то это так: не меняйте то, что уже работает :) 1003 *

Я предоставляю (почти) дословную копию того, как это было обработано на http://www.jakpsatweb.cz/css/css-vertical-center-solution.html - это сильно взломано для IE, но предоставляет чистый способ CSS ответить на вопрос:

.container {display:table; height:100%; position:absolute; overflow:hidden; width:100%;}
.helper    {#position:absolute; #top:50%;
            display:table-cell; vertical-align:middle;}
.content   {#position:relative; #top:-50%;
            margin:0 auto; width:200px; border:1px solid orange;}

Скрипка: http://jsfiddle.net/S9upd/4/

Я пробежал по браузерным снимкам, и это нормально; если не для чего иного, я оставлю оригинал ниже, так что обработка процентной маржи в соответствии со спецификацией CSS увидит свет.

Оригинал:

Похоже, я опоздал на вечеринку!

Есть несколько комментариев выше, которые предполагают, что это вопрос CSS - разделение интересов и все. Позвольте мне предварить это, сказав, что CSS действительно выстрелил себе в ногу на этом. Я имею в виду, как легко это сделать:

.container {
    position:absolute;
    left: 50%;
    top: 50%;
    overflow:visible;
}
.content {
    position:relative;
    margin:-50% 50% 50% -50%;
}

Правильно? Левый верхний угол контейнера будет в центре экрана, а с отрицательными полями содержимое будет волшебным образом появляться в абсолютном центре страницы! http://jsfiddle.net/rJPPc/

Неверно! Горизонтальное расположение в порядке, но вертикально ... О, я вижу. По-видимому, в css при установке верхних полей в% значение рассчитывается как процент всегда относительно width содержащего блока . Как яблоки и апельсины! Если вы не доверяете мне или Mozilla doco, поиграйте со скрипкой выше, отрегулировав ширину контента, и удивитесь.

---

Теперь, когда CSS был моим хлебом с маслом, я не собирался сдаваться. В то же время я предпочитаю что-то более простое, поэтому я позаимствовал выводы чешского CSS-гуру и превратил его в рабочую скрипку. Короче говоря, мы создаем таблицу, в которой вертикальное выравнивание установлено на середину:

<table class="super-centered"><tr><td>
    <div class="content">
        <p>I am centered like a boss!</p>
    </div>
</td></tr></table>

А затем позиция контента настраивается со старым добрым margin: 0 auto; :

.super-centered {position:absolute; width:100%;height:100%;vertical-align:middle;}
.content {margin:0 auto;width:200px;}​

Рабочая скрипка, как и было обещано: http://jsfiddle.net/teDQ2/

Answer 3

Это здорово. Я добавил функцию обратного вызова

center: function (options, callback) {

if (options.transition > 0) {
   $(this).animate(props, options.transition, callback);
} else { 
    $(this).css(props);
   if (typeof callback == 'function') { // make sure the callback is a function
       callback.call(this); // brings the scope to the callback
   }
}

Answer 4

Компонент перехода этой функции работал очень плохо для меня в Chrome (не тестировал в другом месте). Я бы изменил размер окна, и мой элемент медленно двигался, пытаясь наверстать упущенное.

Итак, следующая функция комментирует эту часть. Кроме того, я добавил параметры для передачи в необязательные логические значения x & y, если вы хотите центрировать по вертикали, а не по горизонтали, например:

// Center an element on the screen
(function($){
  $.fn.extend({
    center: function (x,y) {
      // var options =  $.extend({transition:300, minX:0, minY:0}, options);
      return this.each(function() {
                if (x == undefined) {
                    x = true;
                }
                if (y == undefined) {
                    y = true;
                }
                var $this = $(this);
                var $window = $(window);
                $this.css({
                    position: "absolute",
                });
                if (x) {
                    var left = ($window.width() - $this.outerWidth())/2+$window.scrollLeft();
                    $this.css('left',left)
                }
                if (!y == false) {
            var top = ($window.height() - $this.outerHeight())/2+$window.scrollTop();   
                    $this.css('top',top);
                }
        // $(this).animate({
        //   top: (top > options.minY ? top : options.minY)+'px',
        //   left: (left > options.minX ? left : options.minX)+'px'
        // }, options.transition);
        return $(this);
      });
    }
  });
})(jQuery);

Answer 5

У меня есть метод "center", который гарантирует, что элемент, который вы пытаетесь центрировать, имеет не только "фиксированное" или "абсолютное" позиционирование, но также гарантирует, что элемент, который вы центрируете, меньше, чем его родительский элемент. , этот центр и элемент по отношению к родительскому, если родительский элемент меньше, чем сам элемент, он будет грабить DOM до следующего родительского элемента и центрировать его относительно этого.

$.fn.center = function () {
        /// <summary>Centers a Fixed or Absolute positioned element relative to its parent</summary>

        var element = $(this),
            elementPos = element.css('position'),
            elementParent = $(element.parent()),
            elementWidth = element.outerWidth(),
            parentWidth = elementParent.width();

        if (parentWidth <= elementWidth) {
            elementParent = $(elementParent.parent());
            parentWidth = elementParent.width();
        }

        if (elementPos === "absolute" || elementPos === "fixed") {
            element.css('right', (parentWidth / 2) - elementWidth / 2 + 'px');
        }
    };

Answer 6

Пожалуйста, используйте это:

$(window).resize(function(){
    $('.className').css({
        position:'absolute',
        left: ($(window).width() - $('.className').outerWidth())/2,
        top: ($(window).height() - $('.className').outerHeight())/2
    });
});

// To initially run the function:
$(window).resize();

Answer 7

Я использую это:

$(function() {
   $('#divId').css({
    'left' : '50%',
    'top' : '50%',
    'position' : 'absolute',
    'margin-left' : -$('#divId').outerWidth()/2,
    'margin-top' : -$('#divId').outerHeight()/2
  });
});

Answer 8

Много способов сделать это. Мой объект скрыт с помощью display: none только внутри тега BODY, так что позиционирование относительно BODY. После использования $ ("# object_id"). Show () , я вызываю $ ("# object_id"). Center ()

Я использую position: absolute , потому что возможно, особенно на маленьком мобильном устройстве, что модальное окно больше, чем окно устройства, и в этом случае часть модального контента может быть недоступна, если позиционирование было исправлено.

Вот мой вкус, основанный на ответах других и моих конкретных потребностях:

$.fn.center = function () {
        this.css("position","absolute");

        //use % so that modal window will adjust with browser resizing
        this.css("top","50%");
        this.css("left","50%");

        //use negative margin to center
        this.css("margin-left",(-1*this.outerWidth()/2)+($(window).scrollLeft())+"px");
        this.css("margin-top",(-1*this.outerHeight()/2)+($(window).scrollTop())+"px");

        //catch cases where object would be offscreen
        if(this.offset().top<0)this.css({"top":"5px","margin-top":"0"});
        if(this.offset().left<0)this.css({"left":"5px","margin-left":"0"});

        return this;
    };

Answer 9

МОЕ ОБНОВЛЕНИЕ ОТВЕТА TONY L Это модная версия его ответа, которую я сейчас использую неукоснительно. Я подумал, что поделюсь этим, так как он добавляет немного больше функциональности к нему для различных ситуаций, которые у вас могут возникнуть, например, для различных типов position или только для горизонтального / вертикального центрирования вместо обоих.

center.js:

// We add a pos parameter so we can specify which position type we want

// Center it both horizontally and vertically (dead center)
jQuery.fn.center = function (pos) {
    this.css("position", pos);
    this.css("top", ($(window).height() / 2) - (this.outerHeight() / 2));
    this.css("left", ($(window).width() / 2) - (this.outerWidth() / 2));
    return this;
}

// Center it horizontally only
jQuery.fn.centerHor = function (pos) {
    this.css("position", pos);
    this.css("left", ($(window).width() / 2) - (this.outerWidth() / 2));
    return this;
}

// Center it vertically only
jQuery.fn.centerVer = function (pos) {
    this.css("position", pos);
    this.css("top", ($(window).height() / 2) - (this.outerHeight() / 2));
    return this;
}

По моему <head>:

<script src="scripts/center.js"></script>

Примеры использования:

$("#example1").centerHor("absolute")
$("#example2").centerHor("fixed")

$("#example3").centerVer("absolute")
$("#example4").centerVer("fixed")

$("#example5").center("absolute")
$("#example6").center("fixed")

Он работает с любым типом позиционирования и может легко использоваться по всему сайту, а также легко переноситься на любой другой сайт, который вы создаете. Больше нет надоедливых обходных путей для правильной центровки.

Надеюсь, это кому-нибудь пригодится! Наслаждайтесь.

Answer 10

Вы можете использовать свойство CSS translate:

position: absolute;
transform: translate(-50%, -50%);

Читать этот пост для более подробной информации.