我如何去设置一个<div>在屏幕的中心使用jQuery?
当前回答
这可以只用CSS来完成。但他们是用jQuery或JavaScript问的
在这里，使用CSS Flex box属性来对齐div中心。
body.center{
display:flex;
align-items:center; // Vertical alignment
justify-content:center; // Horizontal alignment
}
对齐项目:中心;-用于垂直对齐。
justify-content:中心;-用于水平对齐。
document.querySelector .classList.add(“身体”)(“中心”); 身体{ Margin: 0; 身高:100 vh; 宽度:100%; 背景:# ccc; ｝ #{主要 背景:# 00 cc00; 宽度:100 px; 身高:100 px; ｝ body.center { 显示:flex; 对齐项目:中心; justify-content:中心; ｝ <身体> < div id = "主" > < / div > < /身体>
其他回答
请使用这个:
$(window).resize(function(){
$('.className').css({
position:'absolute',
left: ($(window).width() - $('.className').outerWidth())/2,
top: ($(window).height() - $('.className').outerHeight())/2
});
});
// To initially run the function:
$(window).resize();
通常，我只会用CSS做这个…但是既然你问你一个方法来做这个用jQuery…
下面的代码将一个div在其容器内水平和垂直地居中:
$("#target").addClass("centered-content") .wrap("<div class='center-outer-container'></div>") .wrap("<div class='center-inner-container'></div>"); body { margin : 0; background: #ccc; } .center-outer-container { position : absolute; display: table; width: 100%; height: 100%; } .center-inner-container { display: table-cell; vertical-align: middle; text-align: center; } .centered-content { display: inline-block; text-align: left; background: #fff; padding : 20px; border : 1px solid #000; } <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.1.min.js"></script> <div id="target">Center this!</div>
(也可以参看这把小提琴)
我更新了托尼的答案 这是他的答案的修改版本，我现在虔诚地使用。我想我会分享它，因为它为你可能有的各种情况增加了更多的功能，比如不同类型的位置，或者只想要水平/垂直居中，而不是两者都要。
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")
它适用于任何定位类型，可以轻松地在整个网站中使用，也可以轻松地移植到您创建的任何其他网站。没有更多的恼人的工作区，为中心的东西正确。
希望这是有用的人在那里!享受。
我在扩展@TonyL给出的精彩答案。我添加了Math.abs()来包装值，而且我还考虑到jQuery可能处于“无冲突”模式，例如在WordPress中。
I recommend that you wrap the top and left values with Math.abs() as I have done below. If the window is too small, and your modal dialog has a close box at the top, this will prevent the problem of not seeing the close box. Tony's function would have had potentially negative values. A good example on how you end up with negative values is if you have a large centered dialog but the end user has installed several toolbars and/or increased his default font -- in such a case, the close box on a modal dialog (if at the top) might not be visible and clickable.
我做的另一件事是通过缓存$(window)对象来加快速度，这样我就减少了额外的DOM遍历，并且我使用了集群CSS。
jQuery.fn.center = function ($) {
var w = $(window);
this.css({
'position':'absolute',
'top':Math.abs(((w.height() - this.outerHeight()) / 2) + w.scrollTop()),
'left':Math.abs(((w.width() - this.outerWidth()) / 2) + w.scrollLeft())
});
return this;
}
要使用，你可以这样做:
jQuery(document).ready(function($){
$('#myelem').center();
});
编辑:
如果这个问题教会了我什么，那就是:不要改变已经有效的东西:)
我提供了一个(几乎)一字不差的副本，这是如何处理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/
