Использование jQuery для центрирования DIV на экране
Как мне настроить <div> в центре экрана с помощью jQuery?
Ответы
Ответ 1
Мне нравится добавлять функции в 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 (с добавленным параметром)
Ответ 2
Я разместил 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%;
}
Ответ 3
Я бы порекомендовал утилиту jQueryUI Position
$('your-selector').position({
of: $(window)
});
который дает вам гораздо больше возможностей, чем только центрирование...
Ответ 4
Вот иди сюда. Я закончил тем, что использовал его для клонирования 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;
}
Ответ 5
Вы можете использовать только 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>
Ответ 6
Я расширяю большой ответ, данный @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();
});
Ответ 7
Я бы использовал функцию 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>
Ответ 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 вне экрана.
Ответ 9
Я не думаю, что абсолютная позиция была бы лучше, если бы вы хотели, чтобы элемент всегда был центрирован в середине страницы. Вероятно, вам нужен фиксированный элемент. Я нашел еще один плагин центрирования jquery, который использовал фиксированное позиционирование. Он называется фиксированный центр.
Ответ 10
Это не проверено, но что-то вроде этого должно работать.
var myElement = $('#myElement');
myElement.css({
position: 'absolute',
left: '50%',
'margin-left': 0 - (myElement.width() / 2)
});
Ответ 11
Компонент перехода этой функции работал очень плохо для меня в 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);
Ответ 12
Это здорово. Я добавил функцию обратного вызова
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
}
}
Ответ 13
Редактировать:
Если вопрос научил меня чему-нибудь, так это: не меняйте то, что уже работает :)
Я предоставляю (почти) дословную копию того, как это было обработано на 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/
Ответ 14
Чтобы центрировать элемент относительно окна просмотра обозревателя (окна), не используйте 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)
Ответ 15
У меня есть метод "центра", который гарантирует, что элемент, который вы пытаетесь центрировать, имеет не только "фиксированное" или "абсолютное" позиционирование, но также гарантирует, что элемент, который вы центрируете, меньше его родительского, этот центр и элемент относительно родителя, если элементы 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');
}
};
Ответ 16
i использую это:
$(function() {
$('#divId').css({
'left' : '50%',
'top' : '50%',
'position' : 'absolute',
'margin-left' : -$('#divId').outerWidth()/2,
'margin-top' : -$('#divId').outerHeight()/2
});
});
Ответ 17
Пожалуйста, используйте это:
$(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();
Ответ 18
вы получаете этот плохой переход, потому что вы корректируете положение элемента каждый раз, когда прокручивается документ. Вы хотите использовать фиксированное позиционирование. Я попробовал этот плагин с фиксированным центром, указанный выше, и, похоже, это хорошо разрешает проблему. Фиксированное позиционирование позволяет вам центрировать элемент один раз, и свойство CSS будет заботиться о том, чтобы поддерживать эту позицию для вас каждый раз, когда вы прокручиваете.
Ответ 19
Вот моя версия. Я могу изменить его после просмотра этих примеров.
$.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");
});
};
Ответ 20
Для этого не требуется 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);
});
});
Ответ 21
МОЙ ОБНОВЛЕНИЕ В ТОНИЙ ОТВЕТ
Это измененная версия его ответа, который я использую сейчас религиозно. Я думал, что поделюсь этим, так как он добавит немного больше функциональности для различных ситуаций, которые могут возникнуть у вас, например, для разных типов 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")
Он работает с любым типом позиционирования и может легко использоваться на всем сайте, а также легко переносится на любой другой сайт, который вы создаете. Нет более раздражающих обходных решений для правильного центрирования.
Надеюсь, это полезно для кого-то там! Наслаждайтесь.
Ответ 22
Много способов сделать это. Мой объект хранится скрытым с дисплеем: 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;
};
Ответ 23
Обычно я бы делал это только с помощью 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>
Ответ 24
Решение CSS Только в двух строках
Он централизует ваш внутренний div горизонтально и вертикально.
#outer{
display: flex;
}
#inner{
margin: auto;
}
только для горизонтального выравнивания, изменения
margin: 0 auto;
и для вертикали, изменения
margin: auto 0;
Ответ 25
Я бы не рекомендовал вам использовать 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>
Надеюсь, это предложение поможет вам. :)
до свидания
Ответ 26
Вы можете использовать свойство CSS translate:
position: absolute;
transform: translate(-50%, -50%);
Подробнее читайте этот пост.
Ответ 27
Почему вы не используете CSS для центрирования div?
#timer_wrap{
position: fixed;
left: 50%;
top: 50%;
}
