css td 上下居中对齐

CSS中的table-layout:fixed属性可以让表格的列宽度固定不变，同时可以使用vertical-align属性来实现td元素的上下居中对齐。

table {
  table-layout: fixed;
}
td {
  vertical-align: middle;
}

此时，如果单元格的内容不够高，仍然无法实现上下居中对齐。可以使用伪元素::before和::after来协助实现。如下所示：

td {
  vertical-align: middle;
  position: relative;
}
td::before {
  content: '';
  height: 50%;
  position: absolute;
  top: 0;
  left: 0;
}
td::after {
  content: '';
  height: 50%;
  position: absolute;
  bottom: 0;
  left: 0;
}

以上代码将单元格设置为相对定位，然后给before和after伪元素定位到单元格的上下中线位置，通过这种方式来实现td元素的上下居中对齐。