固定表格 td div 高度时如何垂直对齐中间（内容）？

Question

我有一个表和一些表行。我想修复 td 的高度，所以我创建了一个 div 设置高度为 60px 并溢出到隐藏，这给了我适当的输出。但如果 td 中的内容较少，则应垂直居中对齐。

table, th, td {
  border:1px solid black;
}
.fixed-height{
    height:60px;
    overflow: hidden;
}

<table style="width:50%">
  <tr>
   <td><div class="fixed-height" ><span>TEST TEST TEST TEST TEST TEST TEST TEST TEST
   TEST TEST TEST TEST TEST TEST TEST EST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TE
   </span>
   </div></td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
   <tr>
    <td><div class="fixed-height" >this should be center</div></td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
  <tr>
    <td><div class="fixed-height" >this should be centerl</div></td>
    <td>14</td>
    <td>10</td>
  </tr>
</table>

jsfiddle link

Answer 1

将以下代码添加到您的 css 中。

.fixed-height {
  display: inline-grid;
  align-items: center;
  height: 60px;
  overflow: hidden;
}