android - 跨浏览器垂直居中的终极解决方案？

Question

简短且无痛，我尝试了很多方法来获取元素，例如信息文本，绝对居中(水平/垂直)不使用 div、Javascript、jQuery 或任何其他内容。

问题不在于让它发挥作用，而且有很多不同的方法，但我正在努力让它跨浏览器兼容。 事情应该如此简单。

例如，在以下场景中，FF21 毫无逻辑地将 50% 的边距顶部解释为 100%。 (但移动设备则不然)。

我正在使用<meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no" />

相关CSS:

body {
    margin: 50% 0 0;
    padding: 0;
    border: 0;
    display: block;
    vertical-align: middle; /* removing this made no real difference at all */
    font-family: Helvetica, Arial, MS Sans Serif;
    font-size: 11pt;
    text-align:center;
    background-color: rgb(10, 50, 100);
    color: #ddd;
}

注释:

• 在 Firefox 中，预期的垂直居中设置为 25% 的上边距(这在移动浏览器中看起来又是错误的)。
• 使用 HTML5
• 尝试避免任何形式的脚本和预先计算的负边距。浏览器应该按照您的要求正确居中。

JS- fiddle :http://jsfiddle.net/sfaVg/

Answer 1

如果没有包含文本的元素，我怀疑您是否能够像您希望的那样将其定位在正中心。一旦你编写了正确的标记(例如，将段落放在它所属的 <p> 中)，使用以下 css 就很有可能；

p {
    display: table-cell;
    vertical-align: middle;
    text-align:center;
}

还要确保其容器(在您的情况下为 body )获得 display: table;和 100% 宽度/高度

演示地址:http://jsfiddle.net/sfaVg/3/

此外，可以在 http://zoffix.com/new/absolute-center-random-width-height.html 找到额外的替代方法(需要两个容器)。

第三种解决方案，当您知道要居中的物体的尺寸时:http://reisio.com/examples/deadcenter/