使用jQuery在屏幕上居中一个DIV

我如何去使用jQuery在屏幕的中心设置一个<div>

我喜欢给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(); 

插件版本

 (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%; } 

我会build议jQueryUI定位工具

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

这给你更多的可能性,而不仅仅是集中…

这是我的。 我最终使用它为我的灯箱克隆。 这个解决scheme的主要优点是,即使窗口被resize,元素也会自动保持居中,这使得这种用法非常理想。

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

我正在扩展@TonyL给出的伟大答案。 我添加Math.abs()来包装值,也考虑到jQuery可能处于“不冲突”模式,例如在WordPress中。

我build议你用Math.abs()包装顶部和左边的值,就像我在下面做的那样。 如果窗口太小,并且您的模式对话框顶部有一个closures框,这将防止未看到closures框的问题。 托尼的function会有潜在的负面价值。 一个很好的例子是,如果你有一个大的中心对话框,但最终用户已经安装了几个工具栏和/或增加了他的默认字体 – 在这种情况下,模式对话框上的closures框(if在顶部)可能不可见和可点击。

我做的另一件事是通过caching$(window)对象来加快速度,以便减less额外的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 UI position函数。

查看工作演示

 <div id="test" style="position:absolute;background-color:blue;color:white"> test div to center in window </div> 

如果我有一个ID为“testing”的中心,那么下面的脚本将中心的文件准备好窗口中的div。 (位置选项中的“我”和“at”的默认值是“中心”)

 <script type="text/javascript"> $(function(){ $("#test").position({ of: $(window) }); }; </script> 

我想纠正一个问题。

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

上面的代码在这种情况下不起作用(假设用户调整屏幕和内容的大小)和scrollTop() = 0 ,例如:

window.height600
this.height650

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

现在盒子居中-25屏幕外。

我不认为有一个绝对的位置将是最好的,如果你想要一个元素总是在页面中间居中。 你可能想要一个固定的元素。 我发现另一个使用固定位置的jquery居中插件。 它被称为固定中心 。

这是未经testing的,但是这样的事情应该工作。

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

在Chrome中,这个函数的转换组件对我来说真的很糟糕(没有在其他地方testing过)。 我会调整窗口大小,我的元素会慢慢地绕着,试图赶上。

所以下面的函数注释掉了。 另外,如果要垂直居中但不水平居中,则添加用于传递可选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%; } 

对? 容器的左上angular将位于屏幕的中心,并带有负边距的内容将奇迹般地重现在页面的绝对中心! http://jsfiddle.net/rJPPc/

错误! 水平定位是好的,但垂直…哦,我明白了。 显然,在css中,当设置以%为单位的顶部边距时,该值是以相对于包含块的宽度的总是百分比来计算的。 像苹果和橘子! 如果你不信任我或者Mozilla的doco,请通过调整内容宽度来玩上面的小提琴。

现在,CSS是我的面包和黄油,我不会放弃。 与此同时,我更喜欢简单的事情,所以我借用捷克CSS专家的研究成果,使其成为一个工作小提琴。 长话短说,我们创build一个垂直alignment设置为中间的表格:

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

要使元素相对于浏览器视口(窗口)居中,不要使用position: absolute ,正确的位置值应该是fixed (绝对的意思是:“元素相对于它的第一个定位的元素(非静态的)祖先元素”) 。

build议中心插件的替代版本使用“%”而不是“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从宽度/高度中排除内容边距(因为我们正在使用position fixed,具有边界没有意义)。 根据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) 

这很棒。 我添加了一个callback函数

 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 () { /// <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); }); }); 

我更新到托尼“回答”这是我现在虔诚地使用他的答案的修改版本。 我想我会分享它,因为它可能会增加稍微更多的function,你可能有不同的情况,如不同types的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") 

它适用于任何定位types,可以轻松地在整个站点中使用,也可以轻松地移植到您创build的任何其他站点。 没有更烦人的解决方法,正确地集中东西。

希望这对于那里的人有用! 请享用。

很多方法来做到这一点。 我的对象保持隐藏显示:没有只是在BODY标签,所以定位是相对于BODY。 使用$(“#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; }; 

通常情况下,我只会用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> 

你可以使用CSS translate属性:

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

阅读这篇文章的更多细节。

为什么你不使用CSS来居中一个div?

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