我如何去设置一个<div>在屏幕的中心使用jQuery?
当前回答
我用这个:
$(function() {
$('#divId').css({
'left' : '50%',
'top' : '50%',
'position' : 'absolute',
'margin-left' : -$('#divId').outerWidth()/2,
'margin-top' : -$('#divId').outerHeight()/2
});
});
其他回答
通常,我只会用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")
它适用于任何定位类型,可以轻松地在整个网站中使用,也可以轻松地移植到您创建的任何其他网站。没有更多的恼人的工作区,为中心的东西正确。
希望这是有用的人在那里!享受。
CSS解决方案 只有两行
它集中你的内部div水平和垂直。
#outer{
display: flex;
}
#inner{
margin: auto;
}
对于仅水平对齐,更改
margin: 0 auto;
对于垂直方向,改变
margin: auto 0;
这个功能的转换组件在Chrome中工作得非常糟糕(没有在其他地方测试)。我会调整窗口的大小,我的元素会慢慢移动,试图赶上。
因此下面的函数注释了这一部分。此外,我还添加了参数,用于传入可选的x和y布尔值,如果你想垂直居中,而不是水平居中,例如:
// Center an element on the screen
(function($){
$.fn.extend({
center: function (x,y) {
// var options = $.extend({transition:300, minX:0, minY:0}, options);
return this.each(function() {
if (x == undefined) {
x = true;
}
if (y == undefined) {
y = true;
}
var $this = $(this);
var $window = $(window);
$this.css({
position: "absolute",
});
if (x) {
var left = ($window.width() - $this.outerWidth())/2+$window.scrollLeft();
$this.css('left',left)
}
if (!y == false) {
var top = ($window.height() - $this.outerHeight())/2+$window.scrollTop();
$this.css('top',top);
}
// $(this).animate({
// top: (top > options.minY ? top : options.minY)+'px',
// left: (left > options.minX ? left : options.minX)+'px'
// }, options.transition);
return $(this);
});
}
});
})(jQuery);
这太棒了。我添加了一个回调函数
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
}
}
推荐文章
- 如何让元素被点击(对于整个文档)?
- Node.js上的html解析器
- 大写还是小写文档类型?
- 我如何检查如果一个变量是JavaScript字符串?
- 如何检测如果多个键被按下一次使用JavaScript?
- 样式化HTML电子邮件的最佳实践
- 如何通过history. pushstate获得历史变化的通知?
- CSS可以在元素中的每个单词后强制换行吗?
- 如何检索视图的维度?
- CSS/HTML:什么是使文本斜体的正确方法?
- 使用jQuery改变输入字段的类型
- 在JavaScript中,什么相当于Java的Thread.sleep() ?
- 我如何才能在表中应用边界?
- 如何使一个DIV不包装?
- 使用jQuery以像素为整数填充或边距值