我如何去设置一个<div>在屏幕的中心使用jQuery?
当前回答
我喜欢添加函数到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();
演示:小提琴(添加参数)
其他回答
为了使元素相对于浏览器视窗居中，不要使用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)
有很多方法可以做到。我的对象被display:none隐藏在BODY标签中，以便定位相对于BODY。在使用$ (" # object_id”),告诉(),我叫美元(“# object_id”).center ()
我使用position:absolute，因为这是可能的，特别是在一个小型移动设备上，模式窗口比设备窗口大，在这种情况下，如果定位是固定的，一些模式内容可能是不可访问的。
以下是根据其他人的回答和我的具体需求我的口味:
$.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;
};
我更新了托尼的答案 这是他的答案的修改版本，我现在虔诚地使用。我想我会分享它，因为它为你可能有的各种情况增加了更多的功能，比如不同类型的位置，或者只想要水平/垂直居中，而不是两者都要。
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")
它适用于任何定位类型，可以轻松地在整个网站中使用，也可以轻松地移植到您创建的任何其他网站。没有更多的恼人的工作区，为中心的东西正确。
希望这是有用的人在那里!享受。
我想纠正一个问题。
this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
以上代码在这种情况下将不起作用。height(假设用户调整屏幕大小，内容是动态的)和scrollTop() = 0，示例:
窗口。高度是600 这一点。高度是650
600 - 650 = -50
-50 / 2 = -25
现在方框在屏幕外的中心位置为-25。
只是说: $ (" # divID ") . html ($ (") . html ($ (" # divID ") . html ()));
