我如何去设置一个<div>在屏幕的中心使用jQuery?


当前回答

为什么你不使用CSS居中div?

#timer_wrap{  
  position: fixed;
  left: 50%;
  top: 50%;
} 

其他回答

CSS解决方案 只有两行

它集中你的内部div水平和垂直。

#outer{
  display: flex;
}
#inner{
  margin: auto;
}

对于仅水平对齐,更改

margin: 0 auto;

对于垂直方向,改变

margin: auto 0;

之所以会出现这种糟糕的过渡,是因为每次滚动文档时都要调整元素的位置。你想要的是使用固定的定位。我尝试了上面列出的固定中心插件,这似乎解决了这个问题很好。固定定位允许您将一个元素居中一次,CSS属性将在您每次滚动时为您维护该位置。

我用这个把UL放在中间位置。

cadasWidth          = $('.card-dashboard').innerWidth();
cadasWidthCenter    = cadasWidth/2;

ulmenuWidth         = $('.card-dashboard ul#menu').outerWidth();
ulmenuWidthCenter   = ulmenuWidth/2;

ulmenuStart = cadasWidthCenter - ulmenuWidthCenter;

$('.card-dashboard ul#menu').css({
    'left' : ulmenuStart,
    'position' : 'relative'
});

我更新了托尼的答案 这是他的答案的修改版本,我现在虔诚地使用。我想我会分享它,因为它为你可能有的各种情况增加了更多的功能,比如不同类型的位置,或者只想要水平/垂直居中,而不是两者都要。

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")

它适用于任何定位类型,可以轻松地在整个网站中使用,也可以轻松地移植到您创建的任何其他网站。没有更多的恼人的工作区,为中心的东西正确。

希望这是有用的人在那里!享受。

这是我的尝试。我最终在我的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;
}