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

https://stackoverflow.com/questions/210717

03-07-2019
|

Вопрос

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

Решение

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

ДЕМОНСТРАЦИЯ: Скрипка (с добавленным параметром)

Другие советы

Я положил плагин 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%;
}

Я бы порекомендовал Утилита позиционирования jQueryUI

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

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

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

$.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;
}

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

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

Я бы использовал Пользовательский интерфейс jQuery position функция.

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

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

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

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

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

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 за кадром.

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

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

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

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

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

Эта альтернативная версия предлагаемого плагина center использует "%" вместо "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)

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

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

Редактировать:

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

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

Я прогнал это через browsershots, и, кажется, все в порядке;если ничего другого не требуется, я сохраню оригинал ниже, чтобы обработка процента маржи в соответствии со спецификацией 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 при установке верхнего поля в % значение вычисляется как процент всегда относительно ширина содержащего блока.Как яблоки и апельсины!Если вы не доверяете мне или Mozilla doco, поиграйте со скриптом выше, отрегулировав ширину содержимого, и будете поражены.

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

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

И чем больше позиция контента отлажена в соответствии со старым добрым запас хода: 0 авто;:

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

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

То, что у меня есть здесь, - это метод "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');
        }
    };

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

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

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

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

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

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

$.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");
    });
};

Для этого не нужен jquery

Я использовал это для центрирования элемента Div.Стиль Css,

.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);
    });

});

МОЕ ОБНОВЛЕНИЕ К ОТВЕТУ ТОНИ Л. Это модифицированная версия его ответа, которую я теперь использую неукоснительно.Я подумал, что хотел бы поделиться им, поскольку это добавляет ему немного больше функциональности для различных ситуаций, которые могут возникнуть у вас, таких как различные типы 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")

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

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

Есть много способов сделать это.Мой объект хранится скрытым с помощью дисплей: отсутствует просто внутри тега BODY, чтобы позиционирование было относительно ТЕЛА.После использования $("#object_id").показать(), Я звоню $("#object_id").center()

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

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

$.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;
    };

Обычно я бы делал это только с помощью 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>

(см . также эта Скрипка)

CSS-решение Только в двух строках

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

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

}

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

margin: 0 auto;

а для вертикали измените

margin: auto 0;

Вы могли бы использовать CSS translate собственность:

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

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

Почему вы не используете CSS для центрирования div?

#timer_wrap{  
  position: fixed;
  left: 50%;
  top: 50%;
}

Лицензировано под: CC-BY-SA с атрибуция

Не связан с StackOverflow