Question

任务是在其他区块内水平和垂直显示中心区块。我使用this code

<div class="parent">
    <div class="child"></div>
</div>

.parent {
  background-color: #AFAFAF;
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
} 

.child {
  background-color: #FF0000;
  bottom: 0;
  height: 200px;
  left: 0;
  margin: auto;
  position: fixed;
  right: 0;
  top: 0;
  width: 200px;
}

并且它在浏览器和iOS设备上运行良好，但在移动Android设备（不是平板电脑）中就是这种情况：内部div被固定到左上角，但是当我使用Adobe Edge Inspect检查元素时，我看到了正确显示此内部div的突出显示区域。如何以Android移动设备为中心解决此问题？内部块的大小将会改变，因此设计应该是通用的。

Answer 1

我曾经以你的方式水平和垂直对齐div，但似乎这种技术并不是真正的跨浏览器。相反，我看了一下Facebook的做法。

The demo on JsFiddle

HTML：

<table>
    <tr>
        <td><div class="square">Some text</div></td>
    </tr>
</table>

CSS：

html, body {
    height: 100%; 
    width: 100%; 
}

table {
    margin: 0px auto;
    height: 100%;
}

.square {
    width: 150px; 
    height: 150px; 
    background-color: red; 
}

注意：我最近看了一眼，看起来Facebook改变了他们这样做的方式。它们仍然使用表格显示属性，但不再使用表格，tr和td标记（而是替代）。

Answer 2

标记的最简单方法是{left:50%;margin-left:-100px;}。

然后与身高相同。 {top:50%;margin-top:-100px;}

总结：

.child {
  background-color: #FF0000;
  height: 200px;
  left: 50%;
  position: fixed;
  top: 50%;
  width: 200px;
  margin: -100px 0 0 -100px;
}

在移动设备上仅使用CSS在水平和垂直方向上显示div

2 个答案: