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

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

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

var myElement = $('#myElement');
myElement.css({
    position: 'absolute',
    left: '50%',
    'margin-left': 0 - (myElement.width() / 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%;
}

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

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

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

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

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

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

Хочу исправить одну проблему.

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 центрирована за кадром.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Для этого не нужен 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);
    });

});

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

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

Подробнее читайте в эта почта.

Я бы использовал функцию 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>

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

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

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

Есть много способов сделать это. Мой объект скрыт с помощью дисплей: нет внутри тега BODY, так что позиционирование выполняется относительно BODY. После использования $ ("# идентификатор_объекта"). show () я вызываю $ ("# идентификатор_объекта"). 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;
    };

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

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

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

(см. также эта рабочий пример)

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

$(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 решениеТолько в двух строках

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

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

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

margin: 0 auto;

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

margin: auto 0;

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

Это можно сделать только с помощью CSS. Но просили с jQuery или JavaScript

Здесь используйте свойство CSS Flex box, чтобы выровнять центр div.

body.center{
  display:flex;
  align-items:center; // Vertical alignment
  justify-content:center; // Horizontal alignment
}

align-items:center; - used to align vertically.

justify-content:center; - used to align horizontally.

document.querySelector("body").classList.add("center");

body {
  margin : 0;
  height:100vh;
  width:100%;
  background: #ccc;
}
#main{
  background:#00cc00;
  width:100px;
  height:100px;
}
body.center{
  display:flex;
  align-items:center;
  justify-content:center;
}

<body>
  <div id = "main"></div>
</body>