垂直居中 CSS 技术在 Chrome 中不起作用答案

【问题标题】：Vertically center CSS techniques don't work in Chrome垂直居中 CSS 技术在 Chrome 中不起作用
【发布时间】：2013-11-14 02:39:32
【问题描述】：

我已经阅读了 stackoverflow 问题和一大堆关于垂直居中文本的文章，如下所示： http://blog.themeforest.net/tutorials/vertical-centering-with-css/

这些技术似乎都不适用于最新版本的 Chrome。这只是 Chrome 的特性吗？我的文字总是出现在顶部。似乎每当我使用 50% 或 100% 作为 CSS 的 height 或 top 的值时，什么都不会发生。

我只需要垂直居中的一行文本。 line-height 没有帮助，因为我希望它位于浏览器窗口的中间……我不知道浏览器窗口会有多高。

更新：问题显然是 Foundation 4。一旦我删除以下内容，一切都会按预期工作：

<link href="/assets/foundation_and_overrides.css?body=1" media="screen" rel="stylesheet" />

知道如何让它与 Foundation 4 一起使用吗？

【问题讨论】：

标签： html css google-chrome vertical-alignment

【解决方案1】：

我经常使用各种垂直居中方法，它们仍然适用于最新版本的 chrome (31)。您可能忽略了一些小细节 - 您可以发布您尝试过的内容吗？

例如：

此技术使用带有vertical-align: middle; display: table-cell; 元素的display:table-cell 包装器：http://jsbin.com/ofapiv/1/edit

而且这种技术使用了一个幽灵元素（:before 元素和height:100%，它和它的兄弟元素都有vertical-align:middle）：http://jsbin.com/uqutol/4/edit

这是简化为仅居中一行文本的幽灵元素技术：http://jsbin.com/ubUxOgO/1/edit

<!DOCTYPE html>
<title>Centered line</title>
<style>
  html { height:100%; }
  .singleline {
    position: absolute;
    top:0; left:0; right:0;bottom:0;
    text-align:center;
  }
  .singleline:before {
    height:100%;
    vertical-align:middle;
    position:relative;
    content:'';
    display:inline-block;
  }
</style>
<div class="singleline">This is a centered line!</div>

【讨论】：

问题显然是Foundation 4。一旦我删除了那个样式表，所有正常的技术都可以工作！