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

演示：小提琴（添加参数）

这是未经测试的，但这样的东西应该工作。

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

我在这里放了一个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 valuesinside:window, // element, center into windowtransition: 0, // millisecond, transition timeminX:0, // pixel, minimum left element valueminY:0, // pixel, minimum top element valuewithScrolling:true, // booleen, take care of the scrollbar (scrollTop)vertical:true, // booleen, center verticalhorizontal: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%;}

这个函数的转换部分在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);

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

您得到的转换很差，因为您每次滚动文档时都在调整元素的位置。您想要的是使用固定定位。我尝试了上面列出的固定中心插件，这似乎很好地解决了问题。固定定位允许您将元素居中一次，CSS属性将负责在您每次滚动时为您维护该位置。

我推荐jQueryUI位置实用程序

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

这给了你更多的可能性而不仅仅是…

我想纠正一个问题。

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。

太棒了我加了一个回调函数

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 functioncallback.call(this); // brings the scope to the callback}}

为什么你不使用CSS对div进行居中？

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

这是我的尝试。我最终将其用于我的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;}

编辑：

如果这个问题教会了我什么，那就是：不要改变已经有效的东西：）

我提供了一个（几乎）逐字逐句的副本，说明这是如何在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自动；：

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

如承诺的工作小提琴：http://jsfiddle.net/teDQ2/

我正在扩展@TonyL给出的伟大答案。我正在添加Math.abs（）来包装值，并且我还考虑到jQuery可能处于“无冲突”模式，例如在WordPress中。

我建议您使用Math.abs（）包装顶部和左侧的值，就像我在下面所做的那样。如果窗口太小，并且您的模态对话框顶部有一个关闭框，这将防止看不到关闭框的问题。Tony的函数可能会有负值。如果您有一个大的居中对话框，但最终用户安装了多个工具栏和/或增加了他的默认字体，那么最终会出现负值的一个很好的例子-在这种情况下，模态对话框上的关闭框（如果在顶部）可能不可见且无法单击。

我做的另一件事是通过缓存$（windows）对象来加快速度，以便减少额外的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();});

这是我的版本。我可能会在看了这些例子后改变它。

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

要使元素相对于浏览器视口（窗口）居中，不要使用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)

您可以单独使用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() allows you to do basic calculations in css.

MDN Documentation for calc()
Browser support table

我这里有一个“中心”方法，它确保您尝试居中的元素不仅是“固定”或“绝对”定位，而且还确保您居中的元素小于其父级，这个中心和元素相对于父级，如果元素父级小于元素本身，它会将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');}};

不需要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);});
});

您可以使用CSStranslate属性：

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

阅读这篇文章了解更多详情。

我将使用jQuery UIposition函数。

查看工作演示

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

如果我有一个ID为“test”的div居中，那么以下脚本将在文档就绪的窗口中将div居中。（位置选项中“my”和“at”的默认值为“center”）

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

我对Tony L的回答的更新这是我现在虔诚地使用的他的答案的修改版本。我想我会分享它，因为它为您可能遇到的各种情况添加了更多功能，例如不同类型的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 onlyjQuery.fn.centerHor = function (pos) {this.css("position", pos);this.css("left", ($(window).width() / 2) - (this.outerWidth() / 2));return this;}
// Center it vertically onlyjQuery.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")

它适用于任何定位类型，可以轻松地在整个站点中使用，也可以轻松地移植到您创建的任何其他站点。没有更多烦人的变通方法来正确定位某些东西。

希望这对外面的人有用！享受。

有很多方法可以做到这一点。我的对象被隐藏在BODY标签内，因此定位是相对于BODY的。使用$（"#object_id"）. show（）后，我调用$（"#object_id"）. center（）

我使用位置：绝对是因为有可能，特别是在小型移动设备上，模态窗口大于设备窗口，在这种情况下，如果定位是固定的，一些模态内容可能无法访问。

这是我根据别人的答案和我的具体需求的口味：

$.fn.center = function () {this.css("position","absolute");
//use % so that modal window will adjust with browser resizingthis.css("top","50%");this.css("left","50%");
//use negative margin to centerthis.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 offscreenif(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;};

我使用这个：

$(function() {$('#divId').css({'left' : '50%','top' : '50%','position' : 'absolute','margin-left' : -$('#divId').outerWidth()/2,'margin-top' : -$('#divId').outerHeight()/2});});

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

（另见这个小提琴）

请使用这个：

$(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解决方案只有两行

它水平和垂直地集中你的内部div。

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

只有水平对齐，改变

margin: 0 auto;

对于垂直，变化

margin: auto 0;

只要说：$（"#divi D"）. html($('').html（$（"#divi D"）. html()));

它可以用css完成。但他们要求用jQuery或JavaScript

在这里，使用#0属性对齐div中心。

body.center{display:flex;align-items:center; // Vertical alignmentjustify-content:center; // Horizontal alignment}

对齐项：中心；-用于垂直对齐。

内容中心-用于水平对齐。

document.querySelector("body").classList.add("center");

body {margin : 0;height:100vh;width:100%;background: #ccc;}#main{background:#00cc00;width:100px;height:100px;}body.center{display:flex;align-items:center;justify-content:center;}

<body><div id="main"></div></body>

我用这个把UL放在中间位置。

cadasWidth          = $('.card-dashboard').innerWidth();cadasWidthCenter    = cadasWidth/2;
ulmenuWidth         = $('.card-dashboard ul#menu').outerWidth();ulmenuWidthCenter   = ulmenuWidth/2;
ulmenuStart = cadasWidthCenter - ulmenuWidthCenter;
$('.card-dashboard ul#menu').css({'left' : ulmenuStart,'position' : 'relative'});