Как мне установить a <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();

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

Я поставил плагин 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 Position

$('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 с id «test» для центрирования, то следующий скрипт будет центрировать div в окне на готовом документе. (значения по умолчанию для «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пределами экрана.

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

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

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

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

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

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

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/

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

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

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

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

вы получаете этот плохой переход, потому что вы корректируете положение элемента каждый раз, когда документ прокручивается. То, что вы хотите, это использовать фиксированное позиционирование. Я попробовал этот плагин с фиксированным центром, указанный выше, и это, похоже, хорошо решает проблему. Фиксированное позиционирование позволяет вам центрировать элемент один раз, а свойство 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 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);
    });

});

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

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

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

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

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

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

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

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

Просто скажите: $ ("# divID"). Html ($ (''). Html ($ ("# divID"). Html ()));

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

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