我如何去设置一个<div>在屏幕的中心使用jQuery?
当前回答
这是未经测试的,但类似的东西应该工作。
var myElement = $('#myElement');
myElement.css({
position: 'absolute',
left: '50%',
'margin-left': 0 - (myElement.width() / 2)
});
其他回答
我这里有一个“居中”方法,它确保你试图居中的元素不仅是“固定的”或“绝对的”定位,而且它还确保你正在居中的元素小于它的父元素,这个居中和元素相对于它的父元素,如果元素的父元素小于元素本身,它将从DOM中抓取到下一个父元素,并相对于它居中。
$.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" || elementPos === "fixed") {
element.css('right', (parentWidth / 2) - elementWidth / 2 + 'px');
}
};
编辑:
如果这个问题教会了我什么,那就是:不要改变已经有效的东西:)
我提供了一个(几乎)一字不差的副本,这是如何处理http://www.jakpsatweb.cz/css/css-vertical-center-solution.html -这是严重黑客的IE,但提供了一个纯CSS的方式来回答这个问题:
.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;}
小提琴:http://jsfiddle.net/S9upd/4/
我在浏览器中运行了这个,看起来很好;如果没有别的原因,我将保留下面的原始内容,以便按照CSS规范规定的保证金百分比处理。
原:
看来我要迟到了!
上面有一些评论认为这是一个CSS问题——关注点的分离。让我先说一句,CSS在这个问题上搬起石头砸自己的脚。我的意思是,这样做有多简单:
.container {
position:absolute;
left: 50%;
top: 50%;
overflow:visible;
}
.content {
position:relative;
margin:-50% 50% 50% -50%;
}
对吧?容器的左上角将位于屏幕的中心,如果边框为负,内容将神奇地重新出现在页面的绝对中心!http://jsfiddle.net/rJPPc/
错了!水平定位是可以的,但垂直…哦,我明白了。显然,在css中,当设置顶部边距为%时,该值总是以相对于包含块宽度的百分比计算。就像苹果和橘子一样!如果你不相信我或Mozilla doco,可以通过调整内容宽度来玩上面的小提琴,你会惊讶的。
现在,CSS是我的面包和黄油,我不打算放弃。同时,我喜欢简单的东西,所以我借用了捷克CSS大师的发现,并使其成为一个工作小提琴。长话短说,我们创建了一个表,其中vertical-align设置为中间:
<table class="super-centered"><tr><td>
<div class="content">
<p>I am centered like a boss!</p>
</div>
</td></tr></table>
并且比内容的位置微调了好老距:0 auto;:
.super-centered {position:absolute; width:100%;height:100%;vertical-align:middle;}
.content {margin:0 auto;width:200px;}
工作提琴承诺:http://jsfiddle.net/teDQ2/
CSS解决方案 只有两行
它集中你的内部div水平和垂直。
#outer{
display: flex;
}
#inner{
margin: auto;
}
对于仅水平对齐,更改
margin: 0 auto;
对于垂直方向,改变
margin: auto 0;
这是我的版本。看完这些例子后,我可能会改变它。
$.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");
});
};
我想纠正一个问题。
this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
以上代码在这种情况下将不起作用。height(假设用户调整屏幕大小,内容是动态的)和scrollTop() = 0,示例:
窗口。高度是600 这一点。高度是650
600 - 650 = -50
-50 / 2 = -25
现在方框在屏幕外的中心位置为-25。