Chrome 不会垂直对齐表格单元格中的文本答案

【问题标题】：Chrome doesn't vertically align text in table cellChrome 不会垂直对齐表格单元格中的文本
【发布时间】：2018-07-18 01:53:44
【问题描述】：

活动站点可以在这里看到：http://twoacr.es/

当 .project-panel 悬停时，一个 div 淡入淡出，其中包含文本。我将它设置为table，并将其内容设置为table-cell，它在Firefox 中运行良好，但Chrome 似乎忽略了高度并将类型全部放在顶部。我尝试了很多不同的方法，但 Chrome 似乎总是起作用。

【问题讨论】：

标签： css google-chrome vertical-alignment

【解决方案1】：

根据您的浏览器支持要求，有许多替代方法可以垂直居中而不依赖表格。

您可以将绝对定位与变换结合使用。或者你可以使用 flexbox。

h3 {
  margin: 0;
}

.box {
  height: 100px;
  background: pink;
  margin: 10px;
  text-align: center;
}

.flexbox {
  display: flex;
  align-items: center;
  justify-content: center;
}

.absolute {
  position: relative;
}

.absolute > h3 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
}

<div class="container">
  <div class="box flexbox">
   <h3>Center</h3>
  </div>
  
  <div class="box absolute">
   <h3>Center</h3>
  </div>
</div>

【讨论】：

请以我添加的链接为例。我认为它在您的示例中有效，因为您明确设置了一个高度，但在我链接的示例中，高度是根据叠加层出现的图像而变化的，并且有不同数量的文本，因此翻译不起作用要么。
只要容器足够大以容纳文本，它就可以工作。声明的高度不是必需的。它只是为了演示目的而提供的。通过在开发面板中编辑 css，我能够让它在您的示例网站上运行。更改 display: table to display: block on '.project-overlay' 并将以下行添加到第一个孩子：position: absolute; top: 50%; transform: translateY(-50%);
完美，似乎有效！我想我只是陷入了表格/表格单元方法，无法弄清楚为什么它不起作用。非常感谢。