我如何去设置一个<div>在屏幕的中心使用jQuery?
当前回答
CSS解决方案 只有两行
它集中你的内部div水平和垂直。
#outer{
display: flex;
}
#inner{
margin: auto;
}
对于仅水平对齐,更改
margin: 0 auto;
对于垂直方向,改变
margin: auto 0;
其他回答
这是我的尝试。我最终在我的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;
}
只是说: $ (" # divID ") . html ($ (") . html ($ (" # divID ") . html ()));
有很多方法可以做到。我的对象被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;
};
我会推荐jQueryUI位置实用工具
$('your-selector').position({
of: $(window)
});
这给了你更多的可能性,而不仅仅是定心…
之所以会出现这种糟糕的过渡,是因为每次滚动文档时都要调整元素的位置。你想要的是使用固定的定位。我尝试了上面列出的固定中心插件,这似乎解决了这个问题很好。固定定位允许您将一个元素居中一次,CSS属性将在您每次滚动时为您维护该位置。