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

简短而轻松，我尝试了许多方法来获取元素，例如info text，绝对居中（H/V），而不使用divs、Javascript、jQuery或任何东西

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

例如，在以下场景中，FF21无逻辑地将50%的利润率上限解释为100%。（不过，移动设备不会）

我正在使用

相关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:

如果没有包含文本的元素，我怀疑您是否能够按照自己的意愿将其定位在死点。一旦你写了正确的标记（例如，把段落放在它所属的地方），使用下面的css是很有可能的

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

还要确保它的容器（

body

在您的例子中）得到display:table；和100%宽度/高度

演示

此外，还可以在以下位置找到额外的替代方法（需要两个容器）

---

第三种解决方案，当您知道居中的尺寸时：

我尝试将*的高度设置为100%，我尝试了垂直对齐，我尝试了填充而不是边距，以及更多的场景。我没有找到任何简单的解决方案，可以在所有普通浏览器中都同等有效。您正在尝试在没有包含元素的情况下将某些内容置于中心位置吗？为什么你会需要这个？有内容（文本）。它不一定是身体，但我经常遇到不令人满意的麻烦，正确地将某些东西居中需要大量的“自大”，然后在某些浏览器/屏幕/操作系统环境下仍然看起来令人毛骨悚然。例如，在所有浏览器中，50%应该是50%，而在firefox中不是100%，仅仅因为它是一匹小马驹，认为它是由彩虹和20%冷却器组成的。是 啊我想你明白我的意思了。对不起，lol。我可以将所有内容封装在成吨的div中以正确居中，但对我来说，这似乎与“最终的、干净的解决方案”并不接近。我完全同意你的观点，居中在css中不是直接的，这是它的缺点之一。Flexbox将来可能会对此有所帮助，但还不是跨浏览器的。检查一下——但是如果没有包含元素，我恐怕这是不可能的：）第一个解决方案似乎正是我所寻找的，第二个看起来也很有趣。只是想知道，为什么在两种解决方案中都要求显示类型为

table

，但我想我可以接受。第三个解决方案正是我不想做的事情的一个例子。感谢这些。@克里斯：它需要渲染为<代码>表格单元 >因为<代码>垂直对齐在表格单元格上有不同的行为（垂直对齐它的内容而不是把它放在内嵌文本的中间），请参阅更多细节。