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

Question

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

问题是没有让它工作并且有很多不同的方法，但我正在失去我的头发试图让它跨浏览器兼容。 而且应该就是这么简单。

例如，在以下场景中，FF21 将 50% 的 margin-top 解释为 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-小提琴：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/