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


760

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


20
Это больше вопрос CSS, чем вопрос jQuery. Вы можете использовать методы jQuery, чтобы помочь вам найти кросс-браузерное позиционирование и применить надлежащие стили CSS к элементу, но суть вопроса в том, как центрировать div на экране с помощью CSS.
Крис Макдональд


2
Если вы центрируете div на экране, возможно, вы используете FIXED позиционирование. Почему бы просто не сделать это: stackoverflow.com/questions/2005954/… . Решение чисто CSS, не требует JavaScript.
Арди Арам

Согласитесь, метод JavaScript совсем не так дружелюбен. Особенно кросс-браузер.
Саймон Хейтер

Ответы:


1070

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


78
Одно изменение, которое я бы предложил: вы должны использовать this.outerHeight () и this.outerWidth () вместо только this.height () и this.width (). В противном случае, если объект имеет границу или отступ, он окажется немного смещенным от центра.
Тревор Бернхам

82
Почему это не является родной частью функциональности jQuery?
Сет Карнеги

14
Что делать, если я не хочу сосредоточиться на содержании <div>вместо <body>? Может быть , вы должны изменить , windowчтобы this.parent()добавить или параметр для него.
Дерек 朕 會 功夫

13
Код в ответе должен использовать «position: fixed», поскольку «absolute» рассчитывается по первому относительному родительскому элементу, а код использует окно для вычисления центра.
Диего

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

143

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

Ваша функция отлично работала для вертикального центра. Это не похоже на работу для горизонтального центра.
Halsafar

CSS предполагает, что вы знаете размер (как минимум, процентов) центрированного div, тогда как jQuery работает как угодно.
Дунк

Мой голос за CSS - гораздо более простой и не требует каких-либо причудливых сценариев Java. Если вы используете фиксированный вместо абсолютного, он останется в центре страницы, даже когда пользователь прокручивает окно браузера
user1616338

60

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

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

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


1
@Timwi - Вы уверены, что сосредотачиваетесь на окне против документа?
Keithhackbarth

1
Ошибка типа: $ (...). Позиция не является функцией
Микеланджело

3
@Michelangelo: вам нужна библиотека jqueryUI, чтобы использовать .position () как функцию. Проверьте: api.jqueryui.com/position/
Jake

Этот фрагмент лучший: D. Но будьте осторожны, элемент должен быть «видимым».
Cԃ ա ԃ

39

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

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

3
Я думаю, что это работает хорошо ... в моем случае это пошло не так из-за использования адаптивного дизайна: ширина моего div изменяется при изменении ширины экрана. Что отлично работает, так это ответ Тони $(window).resize(function(){$('#mydiv').center()}); Л., а затем добавление этого: (mydiv - модальное диалоговое окно, поэтому, когда оно закрыто, я удаляю обработчик события resize.)
Даррен Кук,

1
Иногда вы можете захотеть использовать outerWidth()и outerHeight()учитывать отступы и ширину границы.
Филипп Гербер

Это прекрасно работает для меня в устаревшем проекте с doc type 5, где $(window).height()дает 0. Но я изменил положение на «абсолютное».
Михаил Адамович

26

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


Имейте в виду, что calc () не поддерживается в IE8, если вам требуется поддержка этого браузера, используйте стратегию jquery center.
mbokil

14

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

Мне нравятся ваши улучшения; тем не менее, есть еще одна проблема, которую я обнаружил в зависимости от того, какое именно поведение вы ищете. Абс будет отлично работать только в том случае, если пользователь полностью прокрутил вверх и влево, в противном случае пользователю придется прокручивать окно браузера, чтобы попасть в строку заголовка. Чтобы решить эту проблему, я решил сделать простой оператор if, такой как этот: if (top < w.scrollTop()) top = w.scrollTop();вместе с эквивалентом для left. Опять же, это обеспечивает другое поведение, которое может быть или не быть желательным.
Алекс Йоргенсон

11

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

8

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

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пределами экрана.


6

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

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

6

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


4

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

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

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

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

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

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

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


1
Проблема в том, что не по центру.
Конрад Боровски

@GlitchMr: Завтра я хотел бы дважды проверить рабочий ящик, но вторая скрипка отлично работала на Chrome / Safari Mac
ov

Хорошо, я проверил в Chrome, Firefox и Internet Explorer 8+ (IE7 не работает), и он работает. Но это не работает в Opera ... и это очень странно, учитывая, что это простой CSS и он работает в других браузерах.
Конрад Боровски

@GlitchMr: спасибо, что присматривали за таким старым вопросом. Я обновил скрипку ссылку выше , чтобы показать «правильный» ответ - дайте мне знать , если он работает для вас (или downvote в Лету У меня был мой шанс :).!
OV

Хех, все, что я сделаю, это не проголосую, если не будет отображен правильный ответ (в настоящее время он все еще не работает в Opera, но я думаю, что это ошибка браузера) ... о, подождите ... это работает, если я изменю размер окна, а не если я буду изменять размеры окон в самом JSFiddle. Итак, это работает :). Я прошу прощения за это. Но все же, вы должны поставить предупреждение, что он не работает в IE7. +1. О, и я думаю, что это работает в IE6 ...
Конрад Боровски

3

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

2

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

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

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

0

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


0

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

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

Нет необходимости 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);
    });

});

Вы забыли включить HTML в свой ответ?
Бен

0

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

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

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


0

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

0

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

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

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


1
Для чего-то подобного вы хотели бы установить свой, left: 50%и top: 50%тогда вы можете использовать преобразование translate для правильного смещения его центральной точки. Однако с помощью этого метода браузеры, такие как Chrome, впоследствии будут искажать / размыть текст, что обычно нежелательно. Лучше взять ширину / высоту окна, а затем расположить левую / верхнюю часть на основе этого вместо того, чтобы возиться с преобразованием. Предотвращает искажения и работает во всех браузерах, на которых я его тестировал.
Fata1Err0r

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="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<div id="target">Center this!</div>

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


0

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

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

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

}

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

margin: 0 auto;

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

margin: auto 0;

0

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


-6

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

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

2
В вашем примере верхний / левый угол div будет там, где должен находиться центр.
Кристи Михай
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.