Использование jQuery для центрирования 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(); 

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

Я добавил плагин 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(); 

ВЕРСИЯ 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-трюков

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

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

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

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

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

 $.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*/ } 
 

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

Я рекомендую вам обернуть верхнее и левое значения с помощью Math.abs (), как я сделал ниже. Если окно слишком маленькое, а в вашем модальном диалоговом окне есть верхний флажок, это предотвратит проблему отсутствия windows закрытия. Функция Тони имела бы потенциально отрицательные значения. Хорошим примером того, как вы заканчиваете отрицательные значения, является наличие большого централизованного диалога, но конечный пользователь установил несколько панелей инструментов и / или увеличил шрифт по умолчанию – в этом случае окно закрытия в модальном диалоговом окне (если наверху) может быть не видимым и доступным.

Другая вещь, которую я делаю, это немного ускорить, кэшируя объект $ (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(); }); 

Я бы использовал функцию position jQuery UI .

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

 
test div to center in window

Если у меня есть div с id “test” для центра, тогда следующий скрипт будет центрировать div в окне на готовом документе. (значения по умолчанию для «my» и «at» в опциях позиции «center»)

  

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

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

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

window.height600
this.height650

 600 - 650 = -50 -50 / 2 = -25 

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

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

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

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

Компонент перехода этой функции работал очень плохо для меня в Chrome (не тестировал в другом месте). Я бы изменил размер windows на кучу, и мой элемент медленно разбегался, пытаясь догнать.

Таким образом, следующая функция комментирует это. Кроме того, я добавил параметры для передачи в необязательных 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); 

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

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

Я предоставляю (почти) дословную копию того, как это было обработано на http://www.jakpsatweb.cz/css/css-vertical-center-solution.html – он сильно взломан для IE, но обеспечивает чистый способ CSS отвечая на вопрос:

 .container {display:table; height:100%; position:absolute; overflow:hidden; width:100%;} .helper {#position:absolute; #top:50%; display:table-cell; vertical-align:middle;} .content {#position:relative; #top:-50%; margin:0 auto; width:200px; border:1px solid orange;} 

Сценарий: http://jsfiddle.net/S9upd/4/

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

Оригинал:

Похоже, я опаздываю на вечеринку!

Есть несколько замечаний выше, которые предполагают, что это вопрос CSS – разделение проблем и всех. Позвольте мне предисловие к этому, сказав, что CSS действительно выстрелил себе в ногу на этом. Я имею в виду, как легко было бы это сделать:

 .container { position:absolute; left: 50%; top: 50%; overflow:visible; } .content { position:relative; margin:-50% 50% 50% -50%; } 

Правильно? Верхний левый угол контейнера будет находиться в центре экрана, и с отрицательными полями контент будет волшебным образом появляться в абсолютном центре страницы! http://jsfiddle.net/rJPPc/

Неправильно! Горизонтальное позиционирование в порядке, но вертикально … О, я вижу. По-видимому, в css при установке верхних полей в% значение рассчитывается как процент всегда относительно ширины содержащего блока . Как яблоки и апельсины! Если вы не доверяете мне или Mozilla doco, играйте со скрипкой выше, регулируя ширину содержимого и удивляйтесь.

Теперь, когда CSS был моим хлебом и маслом, я не собирался сдаваться. В то же время я предпочитаю вещи легко, поэтому я заимствовал результаты чешского CSS-гуру и превратил его в рабочую скрипку. Короче говоря, мы создаем таблицу, в которой vertical-align устанавливается в середину:

 

I am centered like a boss!

И чем позиция контента тонко настраивается с хорошим старым краем: 0 auto; :

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

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

Чтобы центрировать элемент относительно windows просмотра обозревателя (windows), не используйте position: absolute , правильное значение позиции должно быть fixed (абсолютное означает: «Элемент расположен относительно его первого позиционированного (не статического) элемента предка») ,

Эта альтернативная версия предлагаемого центра плагина использует «%» вместо «px», поэтому, когда вы изменяете размер windows, содержимое сохраняется в центре:

 $.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 он не работал .outerWidth(true) .

50*(1-ratio) происходит от:

Ширина windows: 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 } } 

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

 $.fn.center = function () { /// Centers a Fixed or Absolute positioned element relative to its parent 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 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); }); }); 

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

В моем :

  

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

 $("#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”). Center ()

Я использую положение: абсолютное, потому что возможно, особенно на небольшом мобильном устройстве, что модальное окно больше windows устройства, и в этом случае часть модального контента может быть недоступна, если позиционирование было исправлено.

Вот мой вкус, основанный на ответах других и моих конкретных потребностях:

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

Обычно я делаю это только с помощью CSS … но так как вы попросили у вас способ сделать это с помощью jQuery …

Следующий код центрирует div как по горизонтали, так и по вертикали внутри контейнера:

 $("#target").addClass("centered-content") .wrap("
") .wrap("
");
 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; } 
  
Center this!

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

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

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

}

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

 margin: 0 auto; 

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

 margin: auto 0; 

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

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

     Centering issue    
Sample

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

     Centering issue    
Sample

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

до свидания

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

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

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

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

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