如何将<div>对齐到页面的中间(水平/宽度)

我有一个div标签，宽度设置为800像素。当浏览器宽度大于800像素时，它不应该拉伸div，但应该将它带到页面的中间。

当前回答

在我的情况下，手机屏幕大小是未知的，这是我所做的。

HTML

<div class="loadingImg"></div>

CSS

.loadingImg{
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 9999999;
    border: 0;
    background: url('../images/loading.gif') no-repeat center;
    background-size: 50px 50px;
    display: block;
    margin: 0 auto;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}

JavaScript(在需要显示此DIV之前)

$(".loadingImg").css("height",$(document).height());
$(".loadingImg").css("width",$(document).width());
$(".loadingImg").show();

2017-10-21 04:02:15

其他回答

将这个类添加到你想居中的div(它应该有一个设置的宽度):

.marginAutoLR
{
    margin-right:auto;
    margin-left:auto;
}

或者，添加边缘到你的div类，像这样:

.divClass
{
    width:300px;
    margin-right:auto;
    margin-left:auto;
}

2014-02-10 16:16:01

只需在body标签之后使用center标签，并在body结束之前结束center标签:

<body>
    <center>
        ... Your code here ...
    </center>
</body>

在我尝试过的所有浏览器中，这都是可行的。

2012-05-11 10:45:32

位置:绝对，然后顶部:50%和左侧:50%将顶部边缘置于屏幕的垂直中心，左侧边缘置于水平中心，然后通过将margin-top添加到div高度的负数，即-100将其向上移动100，同样，margin-left也是如此。这使得div正好位于页面的中心。

# outPopUp { 位置:绝对的; 宽度:300 px; 身高:200 px; z - index: 15; 上图:50%; 左:50%; Margin: -100px 00 -150px; 背景:红色; ｝ < div id = " outPopUp " > < / div >

2012-05-29 07:55:15

.middle {
   margin:0 auto;
   text-align: center;
}

/*它把div放到中心*/

2015-06-18 14:14:13

<div></div>

div {
  display: table;
  margin-right: auto;
  margin-left: auto;
}

2013-01-16 15:06:53

如何将<div>对齐到页面的中间(水平/宽度)

推荐文章

最新文章

标签