it-swarm.com.ru

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

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

736
Craig

Мне нравится добавлять функции в 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 (с добавленным параметром)

1053
Tony L.

Я поставил 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%;
}
138
molokoloco

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

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

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

59
cetnar

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

$.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;
}
39
Juho Vepsäläinen

Вы можете использовать только 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()
Таблица поддержки браузера

25
apaul

Я расширяю замечательный ответ, данный @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();
});
14
Volomike

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

см. Рабочий демо.

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

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

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

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

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 вне экрана.

8
John Butcher

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

6
Fred

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

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

Чтобы центрировать элемент относительно окна просмотра браузера (окна), не используйте 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)
4
Diego

Компонент перехода этой функции работал очень плохо для меня в 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);
4
Eric D. Fields

Правка:

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

Я предоставляю (почти) дословную копию того, как это было обработано 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/

Wrong! Горизонтальное расположение в порядке, но по вертикали ... О, я вижу. По-видимому, в 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/

4
o.v.

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

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
   }
}
4
Keith

У меня есть метод «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');
        }
    };
3
Ryan

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

$(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();
2
satya

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

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

Обычно я делаю это только с помощью CSS ... но так как вы попросили вас сделать это с помощью jQuery ...

Следующий код центрирует div как горизонтально, так и вертикально внутри его контейнера:

$("#target").addClass("centered-content")
            .wrap("<div class='center-outer-container'></div>")
            .wrap("<div class='center-inner-container'></div>");
body {
    margin : 0;
    background: #ccc;
}

.center-outer-container {
    position : absolute;
    display: table;
    width: 100%;
    height: 100%;
}

.center-inner-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.centered-content {
    display: inline-block;
    text-align: left;
    background: #fff;
    padding : 20px;
    border : 1px solid #000;
}
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<div id="target">Center this!</div>

(см. также this Fiddle )

0
John Slegers

CSS решение Только в две строки  

Он централизует ваш внутренний div по горизонтали и вертикали.

#outer{
  display: flex;
}
#inner{
margin: auto;

}

только для горизонтального выравнивания 

margin: 0 auto;

а для вертикали поменяй

margin: auto 0;
0
Shivam Chhetri

Нет необходимости JQuery для этого

Я использовал это, чтобы центрировать элемент Div . Css Style,

.black_overlay{
    display: none;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index:1001;
    -moz-opacity: 0.8;
    opacity:.80;
    filter: alpha(opacity=80);
}

.white_content {
    display: none;
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    padding: 16px;
    border: 16px solid orange;
    background-color: white;
    z-index:1002;
    overflow: auto;
}

Открытый элемент

$(document).ready(function(){
    $(".open").click(function(e){
      $(".black_overlay").fadeIn(200);
    });

});
0
Sajitha Rathnayake

Вот моя версия. Я могу изменить это после того, как посмотрю на эти примеры.

$.fn.pixels = function(property){
    return parseInt(this.css(property));
};

$.fn.center = function(){
    var w = $($w);
    return this.each(function(){
        $(this).css("position","absolute");
        $(this).css("top",((w.height() - $(this).height()) / 2) - (($(this).pixels('padding-top') + $(this).pixels('padding-bottom')) / 2) + w.scrollTop() + "px");
        $(this).css("left",((w.width() - $(this).width()) / 2) - (($(this).pixels('padding-left') + $(this).pixels('padding-right')) / 2) + w.scrollLeft() + "px");
    });
};
0
Andy

МОЕ ОБНОВЛЕНИЕ ОТВЕТА 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")

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

Надеюсь, что это полезно для кого-то там! Наслаждаться.

0
Fata1Err0r

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

0
skaterdav85

Много способов сделать это. Мой объект скрыт с помощью 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;
    };
0
i_a