使用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.height是600
this.height是650
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%; }
