android - 仅使用 CSS 在移动设备上水平和垂直居中显示 div

Question

任务是在其他 block 内水平和垂直居中显示 block 。我用 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 被固定到左上角，但是当我使用 Adob​​e Edge Inspect 检查元素时，我看到了此内部 div 的突出显示区域已正确显示。如何以 Android 移动设备为中心解决此问题？内部 block 的大小会发生变化，因此设计应该是通用的。

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 标签(而是使用 div)。