使用CSS flex属性:http://jsfiddle.net/cytr/j7SEa/6/show/

body {                       /* Centered */
  display: box;
  flex-align: center;
  flex-pack: center;
}

位置:绝对，然后顶部: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 >

如果你有一些常规的内容，而不是只有一行文本，我所知道的唯一可能的原因是计算空白。

这里有一个例子:

HTML

<div id="supercontainer">
  <div id="middlecontainer">
    <div class="common" id="first">first</div>
    <div id="container">
      <div class="common" id="second">second</div>
      <div class="common" id="third">third</div>
    </div>
  </div>
</div>

CSS

body {
  margin: 0;
  padding: 0;
}

.common {
  border: 1px solid black;
}

#supercontainer {
  width: 1200px;
  background: aqua;
  float: left;
}

#middlecontainer {
  float: left;
  width: 104px;
  margin: 0 549px;
}

#container {
  float: left;
}

#first {
  background: red;
  height: 102px;
  width: 50px;
  float: left;
}

#second {
  background: green;
  height: 50px;
  width: 50px;
}

#third {
  background: yellow;
  height: 50px;
  width: 50px;
}

因此，#supercontainer是你的“整个页面”，它的宽度是1200px。

# middlecontaintainer是你的网站内容的div;宽度为102px。在已知内容宽度的情况下，您需要将页面大小除为2，并从结果中减去内容宽度的一半: 1200 / 2 - (102 / 2) = 549;

是的，我也看到这是CSS的严重失败。

使用下面的代码将div框居中:

.box-content { 保证金:汽车; 上图:0; 右:0; 底部:0; 左:0; 位置:绝对的; 宽度:800 px; 身高:100 px; 背景颜色:绿色; ｝ < div class = " box-content”> < / div >

旧代码中其他一些预先存在的设置将阻止div页面居中L&R:

隐藏在外部样式表链接中的其他类。 其他类嵌入到像img这样的东西中(比如旧的外部CSS打印格式控件)。 带有id和/或CLASSES的图例代码将与命名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();