Chrome 未垂直对齐 table 单元格中的文本

Question

可在此处查看活动站点：http://twoacr.es/

当悬停 .project-panel 时，div 会淡入并显示其中的文字。我将它设置为 table，其中的内容设置为 table-cell，它在 Firefox 中运行良好，但 Chrome 似乎忽略了高度并将类型全部放在顶部。我尝试了多种不同的方式，但 Chrome 似乎总是不正常。

Answer 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>

Chrome 未垂直对齐 table 单元格中的文本

Chrome doesn't vertically align text in table cell

css

google-chrome

vertical-alignment