Я разместил jquery plugin здесь

ОЧЕНЬ КРАТКАЯ ВЕРСИЯ

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

ВЕРСИЯ PLUGIN

(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-Tricks

.center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); /* Yep! */
  width: 48%;
  height: 59%;
}

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

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

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

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

$.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 UI position.

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

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

Если у меня есть div с id "test", чтобы центрировать, то следующий script центрирует 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 вне экрана.

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

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

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

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

Изменить:

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

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

Fiddle: 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 auto;:

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

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

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

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

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

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

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

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

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

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

Я бы не рекомендовал вам использовать jQuery для центровки контейнера, потому что он слишком тяжелый для расчета, и это зависит от JavaScript. Например, если вы создаете простую страницу, вам нужно будет загрузить jQuery только для центрирования узла элемента "div"?

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Centering issue</title>
        <style>
            html,body {
                padding: 0;
                margin: 0;
                height: 100%
            }
            .outer {
                display: table;
                width: 100%;
                height: 100%;
                border-collapse: collapse
            }
            .inner {
                display: table-cell;
                vertical-align: middle
            }
            #sample {
                margin: 0 auto;
                text-align: center;
                line-height: 100px;
                width: 100px;
                height: 100px;
                background: #ccc
            }
        </style>
    </head>
    <body>
        <div class="outer">
            <div class="inner">
                <div id="sample">Sample</div>
            </div>
        </div>
    </body>
</html>

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Centering issue</title>
        <style>
            html,body {
                padding: 0;
                margin: 0;
                height: 100%
            }
            .centerer {
                display: flex;
                align-items: center;
                justify-content: space-around;
                height: 100%
            }
            #sample {
                margin: 0 auto;
                text-align: center;
                line-height: 100px;
                width: 100px;
                height: 100px;
                background: #ccc
            }
        </style>
    </head>
    <body>
        <div class="centerer">
            <div id="sample">Sample</div>
        </div>
    </body>
</html>

Надеюсь, это предложение поможет вам. :)

до свидания

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

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

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

}

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

margin: 0 auto;

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

margin: auto 0;

Обычно я бы делал это только с помощью 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="/jquery-1.12.1.min.js"></script>
<div id="target">Center this!</div>

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

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

Я использую позицию: 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;
    };

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

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

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

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

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

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

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

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

});

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

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

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

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

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

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

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

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