2

简短而轻松，我尝试了很多方法来获取元素，例如信息文本，绝对居中（H/V），而不使用 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-小提琴：http: //jsfiddle.net/sfaVg/

4

1 回答 1

3

如果没有包含文本的元素，我怀疑您是否能够像您希望的那样将其定位到死点。一旦您编写了正确的标记（<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/

于 2013-06-05T08:31:50.720 回答