使用jQuery在屏幕上居中放置DIV

JavaScript

GilGreen

2020-03-11

如何<div>使用jQuery在屏幕中央设置a ？

第591篇《使用jQuery在屏幕上居中放置DIV》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共13个回答

理查德Itachi 2020.03.11

CSS解决方案 仅两行

它将您的内部div水平和垂直居中。

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

}

仅用于水平对齐，更改

margin: 0 auto;

对于垂直方向，变化

margin: auto 0;

逆天蛋蛋 2020.03.11

您可以使用CSS translate属性：

position: absolute;
transform: translate(-50%, -50%);

阅读这篇文章以获取更多详细信息。

Gil伽罗 2020.03.11

为什么不使用CSS将div居中？

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

梅Sam路易 2020.03.11

只需说：$（“＃divID”）。html（$（''）。html（$（“＃divID”）。html（）））;;

西门猴子 2020.03.11

有很多方法可以做到这一点。我的对象通过display：none隐藏在BODY标签内，因此位置相对于BODY。使用$（“＃object_id”）。show（）之后，我调用$（“＃object_id”）。center（）

我使用position：absolute，因为有可能（尤其是在小型移动设备上）模态窗口大于设备窗口，在这种情况下，如果定位固定，则某些模态内容可能无法访问。

这是我根据其他人的回答和我的具体需求而设计的口味：

$.fn.center = function () {
        this.css("position","absolute");

        //use % so that modal window will adjust with browser resizing
        this.css("top","50%");
        this.css("left","50%");

        //use negative margin to center
        this.css("margin-left",(-1*this.outerWidth()/2)+($(window).scrollLeft())+"px");
        this.css("margin-top",(-1*this.outerHeight()/2)+($(window).scrollTop())+"px");

        //catch cases where object would be offscreen
        if(this.offset().top<0)this.css({"top":"5px","margin-top":"0"});
        if(this.offset().left<0)this.css({"left":"5px","margin-left":"0"});

        return this;
    };

小欧学姐 2020.03.11

我对托尼·洛斯答案的更新 这是我现在认真使用的答案的修改后的版本。我想我会分享一下，因为它可以为您可能遇到的各种情况添加更多功能，例如，不同类型的position或者只需要水平/垂直居中，而不是两者都需要。

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

它可以与任何定位类型一起使用，并且可以轻松地在整个站点中使用，也可以轻松地移植到您创建的任何其他站点。不再需要烦人的变通办法来正确地使内容居中。

希望这对外面的人有用！请享用。

Tony樱番长 2020.03.11

不需要jQuery的

我用它来使Div元素居中。CSS样式

.black_overlay{
    display: none;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index:1001;
    -moz-opacity: 0.8;
    opacity:.80;
    filter: alpha(opacity=80);
}

.white_content {
    display: none;
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    padding: 16px;
    border: 16px solid orange;
    background-color: white;
    z-index:1002;
    overflow: auto;
}

开放元素

$(document).ready(function(){
    $(".open").click(function(e){
      $(".black_overlay").fadeIn(200);
    });

});

樱Mandy 2020.03.11

您得到的过渡效果不佳，因为每次滚动文档时都要调整元素的位置。您要使用固定位置。我尝试了上面列出的固定中心插件，看来确实可以很好地解决问题。固定位置允许您将元素居中一次，并且CSS属性将在每次滚动时为您保持该位置。

乐猪猪 2020.03.11

我认为，如果要使元素始终居中于页面中间，则绝对位置最好。您可能需要固定的元素。我找到了另一个使用固定定位的jQuery居中插件。它称为固定中心。

别太浪 2020.03.11

我想纠正一个问题。

this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");

上面的代码在以下情况下this.height（例如，假设用户调整屏幕大小且内容是动态的）不起作用scrollTop() = 0，例如：

window.height是600
this.height是650

600 - 650 = -50  

-50 / 2 = -25

现在，该框位于-25屏幕中央。

路易飞云 2020.03.11

我将使用jQuery UI position函数。

请参阅工作演示。

<div id="test" style="position:absolute;background-color:blue;color:white">
    test div to center in window
</div>

如果我有一个id为“ test”的div居中，则以下脚本会将div居中显示在文档中的窗口中。（位置选项中“ my”和“ at”的默认值为“ center”）

<script type="text/javascript">
$(function(){
  $("#test").position({
     of: $(window)
  });
};
</script>

泡芙村村Pro 2020.03.11

您可以单独使用CSS居中，如下所示：

工作实例

.center{
    position: absolute;
    height: 50px;
    width: 50px;
    background:red;
    top:calc(50% - 50px/2); /* height divided by 2*/
    left:calc(50% - 50px/2); /* width divided by 2*/
}

<div class="center"></div>

calc() 允许您在CSS中进行基本计算。

calc()浏览器支持表的 MDN文档

伽罗小哥 2020.03.11

我喜欢向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;
}

现在我们可以这样写：