如何<div>使用jQuery在屏幕中央设置a ？
使用jQuery在屏幕上居中放置DIV
为什么不使用CSS将div居中？
#timer_wrap{
position: fixed;
left: 50%;
top: 50%;
}
只需说：$（“＃divID”）。html（$（''）。html（$（“＃divID”）。html（）））;;
有很多方法可以做到这一点。我的对象通过display：none隐藏在BODY标签内，因此位置相对于BODY。使用$（“＃object_id”）。show（）之后，我调用$（“＃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;
};
我对托尼·洛斯答案的更新
这是我现在认真使用的答案的修改后的版本。我想我会分享一下，因为它可以为您可能遇到的各种情况添加更多功能，例如，不同类型的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")
它可以与任何定位类型一起使用，并且可以轻松地在整个站点中使用，也可以轻松地移植到您创建的任何其他站点。不再需要烦人的变通办法来正确地使内容居中。
希望这对外面的人有用！请享用。
不需要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);
});
});
您得到的过渡效果不佳，因为每次滚动文档时都要调整元素的位置。您要使用固定位置。我尝试了上面列出的固定中心插件，看来确实可以很好地解决问题。固定位置允许您将元素居中一次，并且CSS属性将在每次滚动时为您保持该位置。
我认为，如果要使元素始终居中于页面中间，则绝对位置最好。您可能需要固定的元素。我找到了另一个使用固定定位的jQuery居中插件。它称为固定中心。
我想纠正一个问题。
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屏幕中央。
我将使用jQuery UI position函数。
<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>
我喜欢向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();
演示：小提琴（带有添加的参数）
CSS解决方案 仅两行
它将您的内部div水平和垂直居中。
}
仅用于水平对齐，更改
对于垂直方向，变化