我如何去设置一个<div>在屏幕的中心使用jQuery?
当前回答
这太棒了。我添加了一个回调函数
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
}
}
其他回答
为了使元素相对于浏览器视窗居中,不要使用position: absolute,正确的位置值应该是固定的(absolute的意思是:“元素的位置相对于它的第一个定位(不是静态的)祖先元素”)。
这个中心插件的替代版本使用“%”而不是“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比)来自:
窗口宽度:W = 100%
元素宽度(%):w = 100 * elementWidthInPixels/windowWidthInPixels
它们计算左边居中:
left = W/2 - w/2 = 50 - 50 * elementWidthInPixels/windowWidthInPixels =
= 50 * (1-elementWidthInPixels/windowWidthInPixels)
我在扩展@TonyL给出的精彩答案。我添加了Math.abs()来包装值,而且我还考虑到jQuery可能处于“无冲突”模式,例如在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.
我做的另一件事是通过缓存$(window)对象来加快速度,这样我就减少了额外的DOM遍历,并且我使用了集群CSS。
jQuery.fn.center = function ($) {
var w = $(window);
this.css({
'position':'absolute',
'top':Math.abs(((w.height() - this.outerHeight()) / 2) + w.scrollTop()),
'left':Math.abs(((w.width() - this.outerWidth()) / 2) + w.scrollLeft())
});
return this;
}
要使用,你可以这样做:
jQuery(document).ready(function($){
$('#myelem').center();
});
我会推荐jQueryUI位置实用工具
$('your-selector').position({
of: $(window)
});
这给了你更多的可能性,而不仅仅是定心…
这是我的尝试。我最终在我的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;
}
这是我的版本。看完这些例子后,我可能会改变它。
$.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");
});
};