使用flexbox垂直对齐td元素中的元素

Question

如何使表格数据td元素中的元素/文本垂直居中，填充其父表格行的整个高度tr？我认为 flexbox 是这里最好的方法。

这是我到目前为止尝试过的：https : //jsfiddle.net/3tr0cn4s/1/

Answer 1

您不需要为此使用 flex：由于它是表格单元格，因此添加就足够了

.table > tbody > tr > td.cell {
  vertical-align: middle;
}

https://jsfiddle.net/1jp53m1q/1/

（长选择器对于覆盖顶部对齐单元格内容的现有规则是必要的）