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

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

733
css html javascript jquery layout

27 ответов

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

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

1049

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

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

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

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

59

вот мой пойти на это. В итоге я использовал его для своего клона 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;
}
40

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

25

я расширяю большой ответ, данный @TonyL. Я добавляю математику.abs (), чтобы обернуть значения, а также я учитываю, что jQuery может быть в режиме "без конфликта", например, в WordPress.

Я рекомендую вам обернуть верхние и левые значения математикой.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();
});
14

Я бы использовал jQuery UI

11

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

this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");

выше код не будет работать в случаях, когда this.height (предположим, что пользователь изменяет размер экрана и содержимое является динамическим) и scrollTop() = 0, например:

window.height is 600
this.height и 650

600 - 650 = -50  

-50 / 2 = -25

теперь поле центрировано -25 за кадром.

8

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

6

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

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

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

Edit:

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

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

я прогнал это через browsershots, и это кажется прекрасным; если ни для чего другого, я буду держать оригинал ниже, чтобы процент обработки маржи, как продиктовано спецификацией 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 был моим хлебом с маслом, я не собирался сдаваться. В то же время я предпочитаю простые вещи, поэтому я заимствовал выводы a чешский CSS гуру и превратил его в рабочую скрипку. Короче говоря, мы создаем таблицу, в которой vertical-align имеет значение middle:

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

4

чтобы центрировать элемент относительно окна просмотра браузера, не используйте position: absolute правильное значение позиции должно быть fixed (Абсолют означает: "элемент расположен относительно своего первого позиционированного (не статического) элемента-предка").

эта альтернативная версия предлагаемого плагина center использует " % "вместо " 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 doc с использованием .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

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

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

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

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

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

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

});
0

МОЕ ОБНОВЛЕНИЕ ДО ОТВЕТА ТОНИ Л Это модифицированная версия его ответа, которую я сейчас использую религиозно. Я думал, что поделюсь им, так как он добавляет немного больше функциональности для различных ситуаций, которые у вас могут быть, например, разные типы position или только горизонтальное / вертикальное центрирование, а не оба.

центр.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

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

Я бы не рекомендовал использовать 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>

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

тю

0

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

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

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

-1

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

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