blocks|key|3987993|text|我喜欢给jQuery添加函数，所以这个函数会有帮助：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3987994|jQuery.fn.center+=+function+()+{
++++this.css("position","absolute");
++++this.css("top",+Math.max(0,+(($(window).height()+-+$(this).outerHeight())+/+2)+%2B+
++++++++++++++++++++++++++++++++++++++++++++++++$(window).scrollTop())+%2B+"px");
++++this.css("left",+Math.max(0,+(($(window).width()+-+$(this).outerWidth())+/+2)+%2B+
++++++++++++++++++++++++++++++++++++++++++++++++$(window).scrollLeft())+%2B+"px");
++++return+this;
}|code-block|syntax|javascript|3987995|现在我们可以这样写：|3987996|$(element).center();|3987997|Demo：Fiddle+(带附加参数)|offset|length|3987998|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/DerekL/GbDw9/^0|0|0|0|0|5|6|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|10|8|@]|9|@$M|11|N|12|1|13]]|A|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

I like adding functions to jQuery so this function would help:

<pre><code>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;
}
</code></pre>

Now we can just write:

<pre><code>$(element).center();
</code></pre>

Demo: <a href="http://jsfiddle.net/DerekL/GbDw9/" rel="noreferrer">Fiddle</a> (with added parameter)

blocks|key|3142956|text|这是未经测试的，但像这样的东西应该可以工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3142957|var+myElement+=+$('#myElement');
myElement.css({
++++position:+'absolute',
++++left:+'50%25',
++++'margin-left':+0+-+(myElement.width()+/+2)
});|code-block|syntax|javascript|3142958|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This is untested, but something like this should work.

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

blocks|key|3988119|text|我在这里放了一个jquery+plugin|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3988120|非常简短的版本|3988121|$('#myDiv').css({top:'50%25',left:'50%25',margin:'-'%2B($('#myDiv').height()+/+2)%2B'px+0+0+-'%2B($('#myDiv').width()+/+2)%2B'px'});|code-block|syntax|javascript|3988122|简短版本|3988123|(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)%2B'px',+left:+(left+>+0+?+left+:+0)%2B'px'});
++++++++++++});
++++++++}
++++});+
})(jQuery);|3988124|由此代码激活：|3988125|$('#mainDiv').center();|3988126|插件版本|3988127|(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+%2B=+$(options.inside).scrollTop()+%7C%7C+0;
+++++++++++++++++++++++++top+=+(top+>+options.minY+?+top+:+options.minY);
+++++++++++++++++++++++++$.extend(props,+{top:+top%2B'px'});
++++++++++++++++++++}
++++++++++++++++++++if+(options.horizontal)+{
++++++++++++++++++++++++++var+left+=+($(options.inside).width()+-+$(this).outerWidth())+/+2;
++++++++++++++++++++++++++if+(options.withScrolling)+left+%2B=+$(options.inside).scrollLeft()+%7C%7C+0;
++++++++++++++++++++++++++left+=+(left+>+options.minX+?+left+:+options.minX);
++++++++++++++++++++++++++$.extend(props,+{left:+left%2B'px'});
++++++++++++++++++++}
++++++++++++++++++++if+(options.transition+>+0)+$(this).animate(props,+options.transition);
++++++++++++++++++++else+$(this).css(props);
++++++++++++++++++++return+$(this);
+++++++++++++++});
++++++++++}
+++++});
})(jQuery);|3988128|3988129|$(document).ready(function(){
++++$('#mainDiv').center();
++++$(window).bind('resize',+function()+{
++++++++$('#mainDiv').center({transition:300});
++++});
);|3988130|是这样吗？|3988131|更新：|3988132|来自CSS-Tricks|3988133|.center+{
++position:+absolute;
++left:+50%25;
++top:+50%25;
++transform:+translate(-50%25,+-50%25);+/*+Yep!+*/
++width:+48%25;
++height:+59%25;
}|3988134|entityMap|0|LINK|mutability|MUTABLE|url|http://plugins.jquery.com/project/autocenter|1|http://css-tricks.com/centering-percentage-widthheight-elements/^0|8|D|0|0|0|0|0|0|0|0|0|0|0|0|0|0|2|A|1|0|0^^$0|@$1|2|3|4|5|6|7|1H|8|@]|9|@$A|1I|B|1J|1|1K]]|C|$]]|$1|D|3|E|5|6|7|1L|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|1M|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|1N|8|@]|9|@]|C|$]]|$1|M|3|N|5|H|7|1O|8|@]|9|@]|C|$I|J]]|$1|O|3|P|5|6|7|1P|8|@]|9|@]|C|$]]|$1|Q|3|R|5|H|7|1Q|8|@]|9|@]|C|$I|J]]|$1|S|3|T|5|6|7|1R|8|@]|9|@]|C|$]]|$1|U|3|V|5|H|7|1S|8|@]|9|@]|C|$I|J]]|$1|W|3|P|5|6|7|1T|8|@]|9|@]|C|$]]|$1|X|3|Y|5|H|7|1U|8|@]|9|@]|C|$I|J]]|$1|Z|3|10|5|6|7|1V|8|@]|9|@]|C|$]]|$1|11|3|12|5|6|7|1W|8|@]|9|@]|C|$]]|$1|13|3|14|5|6|7|1X|8|@]|9|@$A|1Y|B|1Z|1|20]]|C|$]]|$1|15|3|16|5|H|7|21|8|@]|9|@]|C|$I|J]]|$1|17|3|-4|5|6|7|22|8|@]|9|@]|C|$]]]|18|$19|$5|1A|1B|1C|C|$1D|1E]]|1F|$5|1A|1B|1C|C|$1D|1G]]]]

I put a <a href="http://plugins.jquery.com/project/autocenter" rel="noreferrer">jquery plugin</a> here
VERY SHORT VERSION
<pre><code>$('#myDiv').css({top:'50%',left:'50%',margin:'-'+($('#myDiv').height() / 2)+'px 0 0 -'+($('#myDiv').width() / 2)+'px'});
</code></pre>
SHORT VERSION
<pre><code>(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 &gt; 0 ? top : 0)+'px', left: (left &gt; 0 ? left : 0)+'px'});
 });
 }
 }); 
})(jQuery);
</code></pre>
Activated by this code :
<pre><code>$('#mainDiv').center();
</code></pre>
PLUGIN VERSION
<pre><code>(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 &gt; 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 &gt; options.minX ? left : options.minX);
 $.extend(props, {left: left+'px'});
 }
 if (options.transition &gt; 0) $(this).animate(props, options.transition);
 else $(this).css(props);
 return $(this);
 });
 }
 });
})(jQuery);
</code></pre>
Activated by this code :
<pre><code>$(document).ready(function(){
 $('#mainDiv').center();
 $(window).bind('resize', function() {
 $('#mainDiv').center({transition:300});
 });
);
</code></pre>
is that right ?
<h1>UPDATE :</h1>
From <a href="http://css-tricks.com/centering-percentage-widthheight-elements/" rel="noreferrer">CSS-Tricks</a>
<pre><code>.center {
 position: absolute;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%); /* Yep! */
 width: 48%;
 height: 59%;
}
</code></pre>

blocks|key|5399063|text|这个函数的过渡组件在Chrome中运行得很差(没有在其他地方测试过)。我会调整窗口的大小，我的元素会慢慢地移动，试图赶上。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5399064|所以下面的函数注释掉了这一部分。此外，我添加了传递可选x&y布尔值的参数，如果您想要垂直居中而不是水平居中，例如：|5399065|//+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%2B$window.scrollLeft();
++++++++++++++++++++$this.css('left',left)
++++++++++++++++}
++++++++++++++++if+(!y+==+false)+{
++++++++++++var+top+=+($window.height()+-+$this.outerHeight())/2%2B$window.scrollTop();+++
++++++++++++++++++++$this.css('top',top);
++++++++++++++++}
++++++++//+$(this).animate({
++++++++//+++top:+(top+>+options.minY+?+top+:+options.minY)%2B'px',
++++++++//+++left:+(left+>+options.minX+?+left+:+options.minX)%2B'px'
++++++++//+},+options.transition);
++++++++return+$(this);
++++++});
++++}
++});
})(jQuery);|code-block|syntax|javascript|5399066|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

The transition component of this function worked really poorly for me in Chrome (didn't test elsewhere). I would resize the window a bunch and my element would sort of scoot around slowly, trying to catch up. 

So the following function comments that part out. In addition, I added parameters for passing in optional x &amp; y booleans, if you want to center vertically but not horizontally, for example:

<pre><code>// 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 &gt; options.minY ? top : options.minY)+'px',
 // left: (left &gt; options.minX ? left : options.minX)+'px'
 // }, options.transition);
 return $(this);
 });
 }
 });
})(jQuery);
</code></pre>

blocks|key|824171|text|我不认为有一个绝对的位置将是最好的，如果你想要一个元素总是居中在页面的中间。您可能需要一个固定的元素。我发现了另一个使用固定定位的jquery居中插件。它被称为fixed+center。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|824172|entityMap|0|LINK|mutability|MUTABLE|url|http://david-tang.net/2010/06/fixed-center-plugin/^0|28|C|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

I dont think having an absolute position would be best if you want an element always centered in the middle of the page. You probably want a fixed element. I found another jquery centering plugin that used fixed positioning. It is called <a href="http://david-tang.net/2010/06/fixed-center-plugin/" rel="noreferrer">fixed center</a>.

blocks|key|3143161|text|因为每次滚动文档时都要调整元素的位置，所以得到的过渡效果很差。你想要的是使用固定的定位。我尝试了上面列出的固定中心插件，它似乎很好地解决了这个问题。固定位置允许您将元素居中一次，CSS属性将在您每次滚动时保持该位置。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3143162|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

you're getting that poor transition because you're adjusting the position of the element every time the document is scrolled. What you want is to use fixed positioning. I tried that fixed center plugin listed above and that seems to do solve the problem nicely. Fixed positioning allows you to center an element once, and the CSS property will take care of maintaining that position for you every time you scroll.

blocks|key|828488|text|我推荐jQueryUI+Position+utility|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|828489|$('your-selector').position({
++++of:+$(window)
});|code-block|syntax|javascript|828490|这给了你更多的可能性而不仅仅是居中。|828491|entityMap|0|LINK|mutability|MUTABLE|url|http://jqueryui.com/demos/position/^0|3|P|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@]|C|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

I would recommend <a href="http://jqueryui.com/demos/position/" rel="noreferrer">jQueryUI Position utility</a>

<pre><code>$('your-selector').position({
 of: $(window)
});
</code></pre>

which gives you much more possibilities than only centering ...

blocks|key|5399251|text|我想纠正一个问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5399252|this.css("top",+(+$(window).height()+-+this.height()+)+/+2%2B$(window).scrollTop()+%2B+"px");|code-block|syntax|javascript|5399253|上面的代码在this.height+(假设用户调整屏幕大小并且内容是动态的)和scrollTop()+=+0的情况下不起作用，例如：|offset|length|style|CODE|5399254|window.height为600|5399255|this.height为650|5399256|600+-+650+=+-50++

-50+/+2+=+-25|5399257|现在，该框在屏幕外居中-25。|5399258|entityMap^0|0|0|6|B|13|F|0|0|D|E|3|0|0|B|C|3|0|0|B|3|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@$I|Z|J|10|K|L]|$I|11|J|12|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|13|8|@$I|14|J|15|K|L]|$I|16|J|17|K|L]]|9|@]|A|$]]|$1|O|3|P|5|6|7|18|8|@$I|19|J|1A|K|L]|$I|1B|J|1C|K|L]]|9|@]|A|$]]|$1|Q|3|R|5|D|7|1D|8|@]|9|@]|A|$E|F]]|$1|S|3|T|5|6|7|1E|8|@$I|1F|J|1G|K|L]]|9|@]|A|$]]|$1|U|3|-4|5|6|7|1H|8|@]|9|@]|A|$]]]|V|$]]

I would like to correct one issue.

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

Above code won't work in cases when <code>this.height</code> (lets assume that user resizes the screen and content is dynamic) and <code>scrollTop() = 0</code>, example: 

<code>window.height</code> is <code>600</code> 
<code>this.height</code> is <code>650</code>

<pre><code>600 - 650 = -50 

-50 / 2 = -25
</code></pre>

Now the box is centered <code>-25</code> offscreen.

blocks|key|3143253|text|这太棒了。我添加了一个回调函数|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3143254|center:+function+(options,+callback)+{|code-block|syntax|javascript|3143255|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
+++}
}|3143256|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

This is great. I added a callback function

<pre><code>center: function (options, callback) {
</code></pre>

 

<pre><code>if (options.transition &gt; 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
 }
}
</code></pre>

blocks|key|824271|text|为什么不使用CSS将div居中？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|824272|#timer_wrap{++
++position:+fixed;
++left:+50%25;
++top:+50%25;
}+|code-block|syntax|javascript|824273|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Why you don't use CSS for centering a div?

<pre><code>#timer_wrap{ 
 position: fixed;
 left: 50%;
 top: 50%;
} 
</code></pre>

blocks|key|3988376|text|这就是我的想法。我最终把它用在了我的Lightbox克隆上。这种解决方案的主要优点是，即使调整了窗口大小，元素也会自动居中，这使得它非常适合这种用途。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3988377|$.fn.center+=+function()+{
++++this.css({
++++++++'position':+'fixed',
++++++++'left':+'50%25',
++++++++'top':+'50%25'
++++});
++++this.css({
++++++++'margin-left':+-this.outerWidth()+/+2+%2B+'px',
++++++++'margin-top':+-this.outerHeight()+/+2+%2B+'px'
++++});

++++return+this;
}|code-block|syntax|javascript|3988378|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Here's my go at it. I ended up using it for my Lightbox clone. The main advantage of this solution is that the element will stay centered automatically even if the window is resized making it ideal for this sort of usage.

<pre><code>$.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;
}
</code></pre>

blocks|key|828575|text|编辑：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|828576|如果这个问题教会了我什么的话，那就是:不要改变已经有效的东西:)|828577|我提供了一个在http://www.jakpsatweb.cz/css/css-vertical-center-solution.html上如何处理这个问题的(几乎)逐字拷贝-它对于IE来说是严重的黑客攻击，但提供了一个纯CSS的方式来回答这个问题：|offset|length|828578|.container+{display:table;+height:100%25;+position:absolute;+overflow:hidden;+width:100%25;}
.helper++++{#position:absolute;+#top:50%25;
++++++++++++display:table-cell;+vertical-align:middle;}
.content+++{#position:relative;+#top:-50%25;
++++++++++++margin:0+auto;+width:200px;+border:1px+solid+orange;}|code-block|syntax|javascript|828579|小提琴：http://jsfiddle.net/S9upd/4/|828580|我已经运行了这个浏览器截图，它看起来很好；如果没有其他原因，我将保留下面的原始文件，以便按照CSS规范规定的边际百分比处理看到曙光。|828581|原件：|828582|看来我去派对要迟到了！|828583|上面的一些评论表明这是一个CSS问题--分离关注点和所有问题。让我先说一句，CSS在这一点上真的是搬起石头砸自己的脚。我是说，要做到这一点有多容易：|828584|.container+{
++++position:absolute;
++++left:+50%25;
++++top:+50%25;
++++overflow:visible;
}
.content+{
++++position:relative;
++++margin:-50%25+50%25+50%25+-50%25;
}|828585|对吗？容器的左上角将位于屏幕的中心，而具有负边距的内容将神奇地重新出现在页面的绝对中心！http://jsfiddle.net/rJPPc/|828586|错误！水平定位是可以的，但垂直...哦，我明白了。显然，在css中，当以%25为单位设置上边距时，该值被计算为a+percentage+always+relative+to+the++of+the+containing+block。就像苹果和橙子！如果你不信任我或者Mozilla+doco，可以通过调整内容宽度来使用上面的小提琴，你会感到惊讶的。|style|BOLD|828587|828588|现在，CSS是我的谋生之道，我并不打算放弃。同时，我更喜欢简单的事情，所以我借用了Czech+CSS+guru的发现，并把它变成了一把有效的小提琴。长话短说，我们创建一个表，其中垂直对齐设置为中间：|828589|<table+class="super-centered"><tr><td>
++++<div+class="content">
++++++++I+am+centered+like+a+boss!
++++</div>
</td></tr></table>|828590|然后使用良好的旧边距对内容的位置进行微调:0+auto;|828591|.super-centered+{position:absolute;+width:100%25;height:100%25;vertical-align:middle;}
.content+{margin:0+auto;width:200px;}​|828592|承诺的工作小提琴：http://jsfiddle.net/teDQ2/|828593|entityMap|0|LINK|mutability|MUTABLE|url|http://www.jakpsatweb.cz/css/css-vertical-center-solution.html|1|http://jsfiddle.net/S9upd/4/|2|http://jsfiddle.net/rJPPc/|3|https://developer.mozilla.org/en/CSS/margin-top|4|5|http://jsfiddle.net/teDQ2/^0|0|0|7|1Q|0|0|0|4|S|1|0|0|0|0|0|0|18|Q|2|0|0|3|1H|1O|3|0|0|15|E|4|0|0|8|K|0|0|9|Q|5|0^^$0|@$1|2|3|4|5|6|7|1W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1X|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|1Y|8|@]|9|@$F|1Z|G|20|1|21]]|A|$]]|$1|H|3|I|5|J|7|22|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|23|8|@]|9|@$F|24|G|25|1|26]]|A|$]]|$1|O|3|P|5|6|7|27|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|28|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|29|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|2A|8|@]|9|@]|A|$]]|$1|W|3|X|5|J|7|2B|8|@]|9|@]|A|$K|L]]|$1|Y|3|Z|5|6|7|2C|8|@]|9|@$F|2D|G|2E|1|2F]]|A|$]]|$1|10|3|11|5|6|7|2G|8|@$F|2H|G|2I|12|13]]|9|@$F|2J|G|2K|1|2L]]|A|$]]|$1|14|3|-4|5|6|7|2M|8|@]|9|@]|A|$]]|$1|15|3|16|5|6|7|2N|8|@]|9|@$F|2O|G|2P|1|2Q]]|A|$]]|$1|17|3|18|5|J|7|2R|8|@]|9|@]|A|$K|L]]|$1|19|3|1A|5|6|7|2S|8|@$F|2T|G|2U|12|13]]|9|@]|A|$]]|$1|1B|3|1C|5|J|7|2V|8|@]|9|@]|A|$K|L]]|$1|1D|3|1E|5|6|7|2W|8|@]|9|@$F|2X|G|2Y|1|2Z]]|A|$]]|$1|1F|3|-4|5|6|7|30|8|@]|9|@]|A|$]]]|1G|$1H|$5|1I|1J|1K|A|$1L|1M]]|1N|$5|1I|1J|1K|A|$1L|1O]]|1P|$5|1I|1J|1K|A|$1L|1Q]]|1R|$5|1I|1J|1K|A|$1L|1S]]|1T|$5|1I|1J|1K|A|$1L|1M]]|1U|$5|1I|1J|1K|A|$1L|1V]]]]

<h2>Edit:</h2>

If the question taught me anything, it's this: don't change something that already works :)

I'm providing an (almost) verbatim copy of how this was handled on <a href="http://www.jakpsatweb.cz/css/css-vertical-center-solution.html" rel="nofollow noreferrer">http://www.jakpsatweb.cz/css/css-vertical-center-solution.html</a> - it's heavily hacked for IE but provides a pure CSS way of answering the question:

<pre class="lang-css prettyprint-override"><code>.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;}
</code></pre>

Fiddle: <a href="http://jsfiddle.net/S9upd/4/" rel="nofollow noreferrer">http://jsfiddle.net/S9upd/4/</a>

I've run this through browsershots and it seems fine; if for nothing else, I'll keep the original below so that margin percentage handling as dictated by CSS spec sees the light of day.

<h2>Original:</h2>

Looks like I'm late to the party!

There are some comments above that suggest this is a CSS question - separation of concerns and all. Let me preface this by saying that CSS really shot itself in the foot on this one. I mean, how easy would it be to do this:

<pre class="lang-css prettyprint-override"><code>.container {
 position:absolute;
 left: 50%;
 top: 50%;
 overflow:visible;
}
.content {
 position:relative;
 margin:-50% 50% 50% -50%;
}
</code></pre>

Right? Container's top left corner would be in the center of the screen, and with negative margins the content will magically reappear in the absolute center of the page! <a href="http://jsfiddle.net/rJPPc/" rel="nofollow noreferrer">http://jsfiddle.net/rJPPc/</a>

Wrong! Horizontal positioning is OK, but vertically... Oh, I see. Apparently in css, when setting top margins in %, the value is calculated as <a href="https://developer.mozilla.org/en/CSS/margin-top" rel="nofollow noreferrer">a percentage always relative to the width of the containing block</a>. Like apples and oranges! If you don't trust me or Mozilla doco, have a play with the fiddle above by adjusting content width and be amazed.

<hr>

Now, with CSS being my bread and butter, I was not about to give up. At the same time, I prefer things easy, so I've borrowed the findings of a <a href="http://www.jakpsatweb.cz/css/css-vertical-center-solution.html" rel="nofollow noreferrer">Czech CSS guru</a> and made it into a working fiddle. Long story short, we create a table in which vertical-align is set to middle:

<pre class="lang-html prettyprint-override"><code>&lt;table class="super-centered"&gt;&lt;tr&gt;&lt;td&gt;
 &lt;div class="content"&gt;
 &lt;p&gt;I am centered like a boss!&lt;/p&gt;
 &lt;/div&gt;
&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
</code></pre>

And than the content's position is fine-tuned with good old margin:0 auto;:

<pre class="lang-css prettyprint-override"><code>.super-centered {position:absolute; width:100%;height:100%;vertical-align:middle;}
.content {margin:0 auto;width:200px;}​
</code></pre>

Working fiddle as promised: <a href="http://jsfiddle.net/teDQ2/" rel="nofollow noreferrer">http://jsfiddle.net/teDQ2/</a>

blocks|key|5399491|text|我将对@TonyL给出的很好的答案进行扩展。我添加了Math.abs()来包装值，并考虑到jQuery可能处于“无冲突”模式，例如在WordPress中。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5399492|我建议您使用Math.abs()包装顶部和左侧的值，就像我在下面所做的那样。如果窗口太小，并且您的模式对话框在顶部有一个关闭框，这将防止看不到关闭框的问题。托尼的函数会有潜在的负值。关于如何以负值结束的一个很好的例子是，如果您有一个大的居中对话框，但最终用户已经安装了几个工具栏和/或增加了他的默认字体--在这种情况下，模式对话框上的关闭框(如果在顶部)可能看不到，也不能单击。|5399493|我做的另一件事是通过缓存$(window)对象来加快速度，这样我就减少了额外的DOM遍历，并且我使用了集群CSS。|5399494|jQuery.fn.center+=+function+($)+{
++var+w+=+$(window);
++this.css({
++++'position':'absolute',
++++'top':Math.abs(((w.height()+-+this.outerHeight())+/+2)+%2B+w.scrollTop()),
++++'left':Math.abs(((w.width()+-+this.outerWidth())+/+2)+%2B+w.scrollLeft())
++});
++return+this;
}|code-block|syntax|javascript|5399495|要使用，您可以执行如下操作：|5399496|jQuery(document).ready(function($){
++$('#myelem').center();
});|5399497|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|S|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|T|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|V|8|@]|9|@]|A|$I|J]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

I'm expanding upon the great answer given by @TonyL. I'm adding Math.abs() to wrap the values, and also I take into account that jQuery might be in "no conflict" mode, like for instance in WordPress.

I recommend that you wrap the top and left values with Math.abs() as I have done below. If the window is too small, and your modal dialog has a close box at the top, this will prevent the problem of not seeing the close box. Tony's function would have had potentially negative values. A good example on how you end up with negative values is if you have a large centered dialog but the end user has installed several toolbars and/or increased his default font -- in such a case, the close box on a modal dialog (if at the top) might not be visible and clickable.

The other thing I do is speed this up a bit by caching the $(window) object so that I reduce extra DOM traversals, and I use a cluster CSS.

<pre><code>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;
}
</code></pre>

To use, you would do something like:

<pre><code>jQuery(document).ready(function($){
 $('#myelem').center();
});
</code></pre>

blocks|key|5399531|text|这是我的版本。在我看了这些例子之后，我可能会改变它。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5399532|$.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')+%2B+$(this).pixels('padding-bottom'))+/+2)+%2B+w.scrollTop()+%2B+"px");
++++++++$(this).css("left",((w.width()+-+$(this).width())+/+2)+-+(($(this).pixels('padding-left')+%2B+$(this).pixels('padding-right'))+/+2)+%2B+w.scrollLeft()+%2B+"px");
++++});
};|code-block|syntax|javascript|5399533|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Here is my version. I may change it after I look at these examples.

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

blocks|key|5399605|text|要使元素相对于浏览器视口(窗口)居中，请不要使用position:+absolute，正确的位置值应为fixed+(绝对意思是：“元素相对于其第一个定位的(非静态)祖先元素定位”)。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|5399606|这个建议的中心插件的替代版本使用"%25“而不是"px”，因此当您调整窗口大小时，内容将保持居中：|5399607|$.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))+%2B+"%25",
++++++++left:+(50*(1-widthRatio))++%2B+"%25"
++++});

++++return+this;
}|code-block|syntax|javascript|5399608|您需要将margin:+0从宽度/高度中排除内容边距(因为我们使用的是固定位置，所以设置边距没有任何意义)。根据jQuery文档，使用.outerWidth(true)应该包括页边距，但当我尝试使用Chrome时，它并没有像预期的那样工作。|5399609|50*(1-ratio)来自：|5399610|窗口宽度：W+=+100%25|5399611|元素宽度(+%25)：w+=+100+*+elementWidthInPixels/windowWidthInPixels|5399612|它们来计算居中的左边：|5399613|+left+=+W/2+-+w/2+=+50+-+50+*+elementWidthInPixels/windowWidthInPixels+=
+=+50+*+(1-elementWidthInPixels/windowWidthInPixels)|5399614|entityMap^0|O|I|1F|5|0|0|0|4|9|1V|H|0|0|C|0|5|8|0|9|1E|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@$9|11|A|12|B|C]|$9|13|A|14|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|15|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|16|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|17|8|@$9|18|A|19|B|C]|$9|1A|A|1B|B|C]]|D|@]|E|$]]|$1|O|3|P|5|6|7|1C|8|@$9|1D|A|1E|B|C]]|D|@]|E|$]]|$1|Q|3|R|5|6|7|1F|8|@$9|1G|A|1H|B|C]]|D|@]|E|$]]|$1|S|3|T|5|6|7|1I|8|@$9|1J|A|1K|B|C]]|D|@]|E|$]]|$1|U|3|V|5|6|7|1L|8|@]|D|@]|E|$]]|$1|W|3|X|5|J|7|1M|8|@]|D|@]|E|$K|L]]|$1|Y|3|-4|5|6|7|1N|8|@]|D|@]|E|$]]]|Z|$]]

To center the element relative to the browser viewport (window), don't use <code>position: absolute</code>, the correct position value should be <code>fixed</code> (absolute means: "The element is positioned relative to its first positioned (not static) ancestor element"). 

This alternative version of the proposed center plugin uses "%" instead of "px" so when you resize the window the content is keep centered:

<pre><code>$.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;
}
</code></pre>

You need to put <code>margin: 0</code> to exclude the content margins from the width/height (since we are using position fixed, having margins makes no sense). 
According to the jQuery doc using <code>.outerWidth(true)</code> should include margins, but it didn't work as expected when I tried in Chrome.

The <code>50*(1-ratio)</code> comes from:

Window Width: <code>W = 100%</code>

Element Width (in %): <code>w = 100 * elementWidthInPixels/windowWidthInPixels</code>

Them to calcule the centered left: 

<pre><code> left = W/2 - w/2 = 50 - 50 * elementWidthInPixels/windowWidthInPixels =
 = 50 * (1-elementWidthInPixels/windowWidthInPixels)
</code></pre>

blocks|key|5399665|text|您可以单独使用CSS居中，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5399666|5399667|​|5399668|.center{
++++position:+absolute;
++++height:+50px;
++++width:+50px;
++++background:red;
++++top:calc(50%25+-+50px/2);+/*+height+divided+by+2*/
++++left:calc(50%25+-+50px/2);+/*+width+divided+by+2*/
}|code-block|syntax|javascript|5399669|<div+class="center"></div>|5399670|5399671|calc()允许你在css中进行基本的计算。|offset|length|style|CODE|5399672|MDN+Documentation+for+calc()|5399673|Browser+support+table|5399674|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/CSS/calc|1|http://caniuse.com/#feat=calc^0|0|0|0|0|0|0|0|6|0|M|6|0|S|0|0|0|L|1|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|17|8|@]|9|@]|A|$]]|$1|C|3|D|5|6|7|18|8|@]|9|@]|A|$]]|$1|E|3|F|5|G|7|19|8|@]|9|@]|A|$H|I]]|$1|J|3|K|5|G|7|1A|8|@]|9|@]|A|$H|I]]|$1|L|3|D|5|6|7|1B|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|1C|8|@$O|1D|P|1E|Q|R]]|9|@]|A|$]]|$1|S|3|T|5|6|7|1F|8|@$O|1G|P|1H|Q|R]]|9|@$O|1I|P|1J|1|1K]]|A|$]]|$1|U|3|V|5|6|7|1L|8|@]|9|@$O|1M|P|1N|1|1O]]|A|$]]|$1|W|3|-4|5|6|7|1P|8|@]|9|@]|A|$]]]|X|$Y|$5|Z|10|11|A|$12|13]]|14|$5|Z|10|11|A|$12|15]]]]

You can use CSS alone to center like so:

<a href="http://jsfiddle.net/apaul34208/e4y6F/">Working Example</a>

<div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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*/
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="center"&gt;&lt;/div&gt;</code></pre>
</div>
</div>


<code>calc()</code> allows you to do basic calculations in css.

<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/calc">MDN Documentation for <code>calc()</code></a> 
<a href="http://caniuse.com/#feat=calc">Browser support table</a>

blocks|key|3988788|text|我这里有一个"+center“方法，它确保你试图居中的元素不仅是”固定“或”绝对“的位置，而且它还确保你居中的元素小于它的父元素，这个居中和相对于的元素是父元素，如果元素父元素小于元素本身，它将掠夺DOM到下一个父元素，并相对于那个元素居中。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3988789|$.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"+%7C%7C+elementPos+===+"fixed")+{
++++++++++++element.css('right',+(parentWidth+/+2)+-+elementWidth+/+2+%2B+'px');
++++++++}
++++};|code-block|syntax|javascript|3988790|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

What I have here is a "center" method that ensures the element you are attempting to center is not only of "fixed" or "absolute" positioning, but it also ensures that the element you are centering is smaller than its parent, this centers and element relative to is parent, if the elements parent is smaller than the element itself, it will pillage up the DOM to the next parent, and center it relative to that. 

<pre><code>$.fn.center = function () {
 /// &lt;summary&gt;Centers a Fixed or Absolute positioned element relative to its parent&lt;/summary&gt;

 var element = $(this),
 elementPos = element.css('position'),
 elementParent = $(element.parent()),
 elementWidth = element.outerWidth(),
 parentWidth = elementParent.width();

 if (parentWidth &lt;= elementWidth) {
 elementParent = $(elementParent.parent());
 parentWidth = elementParent.width();
 }

 if (elementPos === "absolute" || elementPos === "fixed") {
 element.css('right', (parentWidth / 2) - elementWidth / 2 + 'px');
 }
 };
</code></pre>

blocks|key|3143773|text|这不需要jquery|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3143774|我用它来居中Div元素。Css样式，|3143775|.black_overlay{
++++display:+none;
++++position:+absolute;
++++top:+0%25;
++++left:+0%25;
++++width:+100%25;
++++height:+100%25;
++++background-color:+black;
++++z-index:1001;
++++-moz-opacity:+0.8;
++++opacity:.80;
++++filter:+alpha(opacity=80);
}

.white_content+{
++++display:+none;
++++position:+absolute;
++++top:+25%25;
++++left:+25%25;
++++width:+50%25;
++++height:+50%25;
++++padding:+16px;
++++border:+16px+solid+orange;
++++background-color:+white;
++++z-index:1002;
++++overflow:+auto;
}|code-block|syntax|javascript|3143776|开放元素|3143777|$(document).ready(function(){
++++$(".open").click(function(e){
++++++$(".black_overlay").fadeIn(200);
++++});

});|3143778|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

No need jquery for this

I used this to center Div element.
Css Style,

<pre><code>.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;
}
</code></pre>

Open element

<pre><code>$(document).ready(function(){
 $(".open").click(function(e){
 $(".black_overlay").fadeIn(200);
 });

});
</code></pre>

blocks|key|3143829|text|您可以使用CSS+translate属性：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3143830|position:+absolute;
transform:+translate(-50%25,+-50%25);|code-block|syntax|javascript|3143831|有关更多详细信息，请阅读this+post。|3143832|entityMap|0|LINK|mutability|MUTABLE|url|http://blog.netgloo.com/2014/07/30/centering-a-div-with-css-without-negative-margin-or-jquery/^0|9|9|0|0|C|9|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@]|D|@$9|Z|A|10|1|11]]|E|$]]|$1|M|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

You could use the CSS <code>translate</code> property:

<pre><code>position: absolute;
transform: translate(-50%, -50%);
</code></pre>

Read <a href="http://blog.netgloo.com/2014/07/30/centering-a-div-with-css-without-negative-margin-or-jquery/" rel="nofollow">this post</a> for more details.

blocks|key|3143893|text|我将使用+position函数。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3143894|。|3143895|<div+id="test"+style="position:absolute;background-color:blue;color:white">
++++test+div+to+center+in+window
</div>|code-block|syntax|javascript|3143896|如果我有一个id为"test“的div居中，那么下面的脚本将在document+ready的窗口中居中该div。(位置选项中"my“和"at”的默认值为"center")|3143897|<script+type="text/javascript">
$(function(){
++$("#test").position({
+++++of:+$(window)
++});
};
</script>|3143898|entityMap^0|5|8|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|V|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|W|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|X|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|Q|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|R|$]]

I would use the <a href="http://api.jqueryui.com/position/" rel="noreferrer">jQuery UI</a> <code>position</code> function.

<a href="http://jsfiddle.net/ADm97/1/" rel="noreferrer">See working demo</a>.

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

If i have a div with id "test" to center then the following script would center the div in the window on document ready. (the default values for "my" and "at" in the position options are "center")

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

blocks|key|5399964|text|我对托尼·L的答案的更新，，，这是他的答案的修改版本，我现在很忠实地使用它。我想我应该分享它，因为它为你可能遇到的各种情况添加了更多的功能，比如不同类型的position，或者只想要水平/垂直居中而不是两者都想要。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|CODE|entityRanges|data|5399965|center.js：|5399966|//+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;
}|code-block|syntax|javascript|5399967|在我的<head>|5399968|<script+src="scripts/center.js"></script>|5399969|用法示例：|5399970|$("#example1").centerHor("absolute")
$("#example2").centerHor("fixed")

$("#example3").centerVer("absolute")
$("#example4").centerVer("fixed")

$("#example5").center("absolute")
$("#example6").center("fixed")|5399971|它适用于任何定位类型，可以轻松地在整个站点中使用，也可以轻松移植到您创建的任何其他站点。不再有烦人的工作区来正确地居中。|5399972|希望这对外面的人有用！好好享受吧。|5399973|entityMap^0|D|1|25|8|0|0|0|3|6|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@$9|12|A|13|B|C]|$9|14|A|15|B|D]]|E|@]|F|$]]|$1|G|3|H|5|6|7|16|8|@]|E|@]|F|$]]|$1|I|3|J|5|K|7|17|8|@]|E|@]|F|$L|M]]|$1|N|3|O|5|6|7|18|8|@$9|19|A|1A|B|D]]|E|@]|F|$]]|$1|P|3|Q|5|K|7|1B|8|@]|E|@]|F|$L|M]]|$1|R|3|S|5|6|7|1C|8|@]|E|@]|F|$]]|$1|T|3|U|5|K|7|1D|8|@]|E|@]|F|$L|M]]|$1|V|3|W|5|6|7|1E|8|@]|E|@]|F|$]]|$1|X|3|Y|5|6|7|1F|8|@]|E|@]|F|$]]|$1|Z|3|-4|5|6|7|1G|8|@]|E|@]|F|$]]]|10|$]]

MY UPDATE TO TONY L'S ANSWER
This is the modded version of his answer that I use religiously now. I thought I would share it, as it adds slightly more functionality to it for various situations you may have, such as different types of <code>position</code> or only wanting horizontal/vertical centering rather than both. 

center.js:

<pre><code>// 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;
}
</code></pre>

In my <code>&lt;head&gt;</code>:

<pre><code>&lt;script src="scripts/center.js"&gt;&lt;/script&gt;
</code></pre>

Examples of usage:

<pre><code>$("#example1").centerHor("absolute")
$("#example2").centerHor("fixed")

$("#example3").centerVer("absolute")
$("#example4").centerVer("fixed")

$("#example5").center("absolute")
$("#example6").center("fixed")
</code></pre>

It works with any positioning type, and can be used throughout your entire site easily, as well as easily portable to any other site you create. No more annoying workarounds for centering something properly. 

Hope this is useful for someone out there! Enjoy.

blocks|key|3989121|text|有很多方法可以做到这一点。我的对象通过display:none隐藏在BODY标记中，这样定位就是相对于BODY的。在使用$("#object_id").show()，之后，我调用了$("#object_id").center()|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|3989122|我使用position:absolute是因为有可能，特别是在小型移动设备上，模式窗口可能比设备窗口大，在这种情况下，如果定位是固定的，一些模式内容可能无法访问。|3989123|以下是我根据别人的回答和我的具体需求得出的结论：|3989124|$.fn.center+=+function+()+{
++++++++this.css("position","absolute");

++++++++//use+%25+so+that+modal+window+will+adjust+with+browser+resizing
++++++++this.css("top","50%25");
++++++++this.css("left","50%25");

++++++++//use+negative+margin+to+center
++++++++this.css("margin-left",(-1*this.outerWidth()/2)%2B($(window).scrollLeft())%2B"px");
++++++++this.css("margin-top",(-1*this.outerHeight()/2)%2B($(window).scrollTop())%2B"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;
++++};|code-block|syntax|javascript|3989125|entityMap^0|J|C|1O|M|2I|O|0|3|H|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|X|8|@$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|10|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|11|8|@]|D|@]|E|$M|N]]|$1|O|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|P|$]]

Lot's of ways to do this. My object is kept hidden with display:none just inside the BODY tag so that positioning is relative to the BODY. After using $("#object_id").show(), I call $("#object_id").center()

I use position:absolute because it is possible, especially on a small mobile device, that the modal window is larger than the device window, in which case some of the modal content could be inaccessible if positioning was fixed.

Here's my flavor based on other's answers and my specific needs:

<pre><code>$.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&lt;0)this.css({"top":"5px","margin-top":"0"});
 if(this.offset().left&lt;0)this.css({"left":"5px","margin-left":"0"});

 return this;
 };
</code></pre>

blocks|key|3989127|text|我使用的是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3989128|$(function()+{
+++$('#divId').css({
++++'left'+:+'50%25',
++++'top'+:+'50%25',
++++'position'+:+'absolute',
++++'margin-left'+:+-$('#divId').outerWidth()/2,
++++'margin-top'+:+-$('#divId').outerHeight()/2
++});
});|code-block|syntax|javascript|3989129|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

i use this:

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

blocks|key|3989190|text|通常，我只会用CSS来做这件事...但是既然你问过你用jQuery做这件事的方法...|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3989191|下面的代码使div在其容器内水平和垂直居中：|3989192|​|3989193|$("#target").addClass("centered-content")
++++++++++++.wrap("<div+class='center-outer-container'></div>")
++++++++++++.wrap("<div+class='center-inner-container'></div>");|code-block|syntax|javascript|3989194|body+{
++++margin+:+0;
++++background:+#ccc;
}

.center-outer-container+{
++++position+:+absolute;
++++display:+table;
++++width:+100%25;
++++height:+100%25;
}

.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;
}|3989195|<script+type="text/javascript"+src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<div+id="target">Center+this!</div>|3989196|3989197|(另请参阅)|3989198|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|V|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|W|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|H|7|X|8|@]|9|@]|A|$I|J]]|$1|M|3|N|5|H|7|Y|8|@]|9|@]|A|$I|J]]|$1|O|3|E|5|6|7|Z|8|@]|9|@]|A|$]]|$1|P|3|Q|5|6|7|10|8|@]|9|@]|A|$]]|$1|R|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|S|$]]

Normally, I would do this with CSS only... but since you asked you a way to do this with jQuery...

The following code centers a div both horizontally and vertically inside its container :

<div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$("#target").addClass("centered-content")
 .wrap("&lt;div class='center-outer-container'&gt;&lt;/div&gt;")
 .wrap("&lt;div class='center-inner-container'&gt;&lt;/div&gt;");</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script type="text/javascript" src="https://code.jquery.com/jquery-1.12.1.min.js"&gt;&lt;/script&gt;
&lt;div id="target"&gt;Center this!&lt;/div&gt;</code></pre>
</div>
</div>


(see also <a href="https://jsfiddle.net/3k1ts96b/1/" rel="nofollow">this Fiddle</a>)

blocks|key|3144122|text|请使用以下命令：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3144123|$(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();|code-block|syntax|javascript|3144124|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Please use this: 

<pre><code>$(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();
</code></pre>

blocks|key|3989302|text|CSS解决方案只有两行|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|3989303|它在水平和垂直方向上使内部div居中。|3989304|#outer{
++display:+flex;
}
#inner{
++margin:+auto;
}|code-block|syntax|javascript|3989305|对于仅水平对齐，请更改|3989306|margin:+0+auto;|3989307|对于垂直领域，请更改|3989308|margin:+auto+0;|3989309|entityMap^0|0|B|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Z|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|10|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|11|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|12|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|13|8|@]|D|@]|E|$]]|$1|S|3|T|5|J|7|14|8|@]|D|@]|E|$K|L]]|$1|U|3|-4|5|6|7|15|8|@]|D|@]|E|$]]]|V|$]]

CSS solution
In two lines only
It centralize your inner div horizontally and vertically.
<pre><code>#outer{
 display: flex;
}
#inner{
 margin: auto;
}
</code></pre>
for only horizontal align, change
<pre><code>margin: 0 auto;
</code></pre>
and for vertical, change
<pre><code>margin: auto 0;
</code></pre>

blocks|key|5400194|text|只需说：$("#divID").html($('').html($("#divID").html()))；|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5400195|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Just say:
$("#divID").html($('').html($("#divID").html()));

blocks|key|3144262|text|只需使用CSS即可完成。但他们问的是jQuery或JavaScript|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|3144263|在这里，使用属性来对齐div中心。|3144264|body.center{
++display:flex;
++align-items:center;+//+Vertical+alignment
++justify-content:center;+//+Horizontal+alignment
}|code-block|syntax|javascript|3144265|3144266|++-用于垂直对齐。+-用于水平对齐。|blockquote|3144267|3144268|3144269|​|3144270|document.querySelector("body").classList.add("center");|3144271|body+{
++margin+:+0;
++height:100vh;
++width:100%25;
++background:+#ccc;
}
#main{
++background:#00cc00;
++width:100px;
++height:100px;
}
body.center{
++display:flex;
++align-items:center;
++justify-content:center;
}|3144272|<body>
++<div+id="main"></div>
</body>|3144273|3144274|entityMap^0|4|3|I|H|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@$9|14|A|15|B|C]|$9|16|A|17|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|18|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|19|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|1A|8|@]|D|@]|E|$]]|$1|N|3|O|5|P|7|1B|8|@]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|1C|8|@]|D|@]|E|$]]|$1|R|3|-4|5|6|7|1D|8|@]|D|@]|E|$]]|$1|S|3|T|5|6|7|1E|8|@]|D|@]|E|$]]|$1|U|3|V|5|J|7|1F|8|@]|D|@]|E|$K|L]]|$1|W|3|X|5|J|7|1G|8|@]|D|@]|E|$K|L]]|$1|Y|3|Z|5|J|7|1H|8|@]|D|@]|E|$K|L]]|$1|10|3|T|5|6|7|1I|8|@]|D|@]|E|$]]|$1|11|3|-4|5|6|7|1J|8|@]|D|@]|E|$]]]|12|$]]

It can be done with only CSS. But they asked with jQuery or JavaScript
Here, use <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" rel="nofollow noreferrer"><code>CSS Flex box</code></a> property to align the div center.
<pre><code>body.center{
 display:flex;
 align-items:center; // Vertical alignment
 justify-content:center; // Horizontal alignment
}
</code></pre>
<blockquote>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/align-items" rel="nofollow noreferrer">align-items:center;</a> - used to align vertically.
</blockquote>
<blockquote>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content" rel="nofollow noreferrer">justify-content:center;</a> - used to align horizontally.
</blockquote>
<div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>document.querySelector("body").classList.add("center");</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
 &lt;div id="main"&gt;&lt;/div&gt;
&lt;/body&gt;</code></pre>
</div>
</div>

How do I go about setting a <code>&lt;div&gt;</code> in the center of the screen using jQuery?

Using jQuery to center a DIV on the screen

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

如何使用jQuery在屏幕中央设置<div>？

问使用jQuery在屏幕上居中显示
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jQuery在屏幕上居中显示EN