table单元格td内固定高度div的内容如何实现垂直居中对齐

解决方案 #

给.fixed-height类新增flex布局属性即可实现需求，修改后的CSS如下：

table, th, td {
  border:1px solid black;
}
.fixed-height{
    height: 60px;
    overflow: hidden;
    /* 新增以下两行实现垂直居中 */
    display: flex;
    align-items: center;
}

效果说明 #

• 内容高度不足60px时，内容会自动沿垂直方向居中对齐
• 内容高度超过60px时，超出部分仍会被隐藏，原有布局逻辑不受影响

内容的提问来源于stack exchange，提问作者Aman Sadhwani