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-Fiddle：http://jsfiddle.net/sfaVg/

Answer 1

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

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

还要确保其容器（在您的情况下为body）显示：table;和100％宽度/高度

http://jsfiddle.net/sfaVg/3/

演示

此外，可以在http://zoffix.com/new/absolute-center-random-width-height.html

找到奖励替代方法（需要两个容器）

第三种解决方案，当您知道所关注的内容的维度时：http://reisio.com/examples/deadcenter/

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

1 个答案: