Як мені вирішити налаштування 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)
});

що дає вам набагато більше можливостей, ніж лише центрування ...

Ось мій погляд на це. Я в кінцевому рахунку використовував його для мого клона 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 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, який використовував фіксоване позиціонування. Його називають нерухомим центром .

Перехідний компонент цієї функції працював для мене дуже погано (не тестував в іншому місці). Я змінив би розмір вікна купу, і мій елемент би почав повільно коситись, намагаючись наздогнати.

Отже, наступна функція коментує цю частину. Крім того, я додав параметри для передачі в необов'язкові булеві 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;}

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

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

Я маю тут метод "центр", який гарантує, що елемент, який ви намагаєтеся центрирувати, є не лише "фіксованим" або "абсолютним" позиціонуванням, але також гарантує, що елемент, який ви центруєте, буде меншим за його батьківський, це центри а елемент відносно є батьківським; якщо батьківський елемент менший, ніж сам елемент, він розграбує 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,

.black_overlay{
    display: none;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index:1001;
    -moz-opacity: 0.8;
    opacity:.80;
    filter: alpha(opacity=80);
}

.white_content {
    display: none;
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    padding: 16px;
    border: 16px solid orange;
    background-color: white;
    z-index:1002;
    overflow: auto;
}

Відкритий елемент

$(document).ready(function(){
    $(".open").click(function(e){
      $(".black_overlay").fadeIn(200);
    });

});

МОЕ ОНОВЛЕННЯ ДО ВІДПОВІДУ ТОНІ Це мій варіант його відповіді, який я зараз релігійно використовую. Я думав, що поділюсь цим, оскільки це додає йому трохи більше функціональності для різних ситуацій, наприклад, для різних типів positionабо бажаючих лише горизонтального / вертикального центрування, а не для обох.

center.js:

// We add a pos parameter so we can specify which position type we want

// Center it both horizontally and vertically (dead center)
jQuery.fn.center = function (pos) {
    this.css("position", pos);
    this.css("top", ($(window).height() / 2) - (this.outerHeight() / 2));
    this.css("left", ($(window).width() / 2) - (this.outerWidth() / 2));
    return this;
}

// Center it horizontally only
jQuery.fn.centerHor = function (pos) {
    this.css("position", pos);
    this.css("left", ($(window).width() / 2) - (this.outerWidth() / 2));
    return this;
}

// Center it vertically only
jQuery.fn.centerVer = function (pos) {
    this.css("position", pos);
    this.css("top", ($(window).height() / 2) - (this.outerHeight() / 2));
    return this;
}

По-моєму <head>:

<script src="scripts/center.js"></script>

Приклади використання:

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

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

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

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

Сподіваюся, це корисно для когось там! Насолоджуйтесь.

Багато способів зробити це. Мій об’єкт зберігається прихованим із відображенням: жоден не знаходиться просто всередині тегу BODY, щоб позиціонування було відносно BODY. Після використання $ ("# object_id"). Show () , я викликаю $ ("# object_id") центр центру ()

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

Ось мій смак на основі відповідей інших та моїх конкретних потреб:

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

Наступний код центрирует діву як горизонтально, так і вертикально всередині його контейнера:

$("#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>

(див. також цей Fiddle )

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

Він централізує ваш внутрішній поділ по горизонталі та вертикалі.

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

}

лише горизонтальне вирівнювання, зміна

margin: 0 auto;

а для вертикальної - зміна

margin: auto 0;

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

Чому ви не використовуєте CSS для центрування діва?

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