我如何去设置一个<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();
演示:小提琴(添加参数)
其他回答
这是我的尝试。我最终在我的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;
}
这太棒了。我添加了一个回调函数
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
}
}
编辑:
如果这个问题教会了我什么,那就是:不要改变已经有效的东西:)
我提供了一个(几乎)一字不差的副本,这是如何处理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/
我会推荐jQueryUI位置实用工具
$('your-selector').position({
of: $(window)
});
这给了你更多的可能性,而不仅仅是定心…
你可以像这样单独使用CSS居中:
工作示例
.center { 位置:绝对的; 高度:50 px; 宽度:50 px; 背景:红色; 顶部:calc(50% - 50px/2);/*高度除以2*/ 左:calc(50% - 50px/2);/*宽度除以2*/ } < div class = "中心" > < / div >
Calc()允许您在css中进行基本计算。
用于calc()的MDN文档 浏览器支持表
推荐文章
- 我如何使用Jest模拟JavaScript的“窗口”对象?
- 如何使Bootstrap 4卡在卡列相同的高度?
- 我如何等待一个承诺完成之前返回一个函数的变量?
- 在JavaScript中根据键值查找和删除数组中的对象
- 使嵌套JavaScript对象平放/不平放的最快方法
- 使用域集图例引导
- 如何以及为什么'a'['toUpperCase']()在JavaScript工作?
- 音频停止功能
- 有Grunt生成index.html不同的设置
- 如何禁用谷歌翻译从HTML在Chrome
- 文档之间的区别。addEventListener和window。addEventListener?
- 如何检查动态附加的事件监听器是否存在?
- 防止在ASP中缓存。NET MVC中使用属性的特定操作
- 如何写setTimeout与参数Coffeescript
- 将JavaScript字符串中的多个空格替换为单个空格