表格文字垂直居中的核心实现方式
要解决表格文字高度不一时的垂直居中问题，核心是使用CSS的vertical-align属性，该属性专门用于设置行内元素或者表格单元格元素的垂直对齐方式，默认值为baseline，也就是基线对齐，这也是文字高度不一致时看起来不对齐的主要原因。
基础表格垂直居中实现
对于普通的HTML表格，只需要给td或者th元素设置vertical-align: middle即可实现单元格内容垂直居中，不管单元格内文字是单行还是多行，都能保持居中对齐。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
/* 给所有表格单元格设置垂直居中 */
td, th {
vertical-align: middle;
border: 1px solid #ccc;
padding: 8px;
}
table {
border-collapse: collapse;
width: 500px;
}
</style>
</head>
<body>
<table>
<tr>
<th>姓名</th>
<th>简介</th>
</tr>
<tr>
<td>张三</td>
<td>这是一段比较长的简介内容，会换行显示，测试多行文字的垂直居中效果</td>
</tr>
<tr>
<td>李四</td>
<td>单行简介</td>
</tr>
</table>
</body>
</html>
特殊场景的处理方式
单元格内使用块级元素的情况
如果单元格内嵌套了div等块级元素，直接给td设置vertical-align: middle可能不会生效，这时候需要同时给嵌套的块级元素设置对应的对齐属性，或者调整父元素的显示方式。
/* 处理单元格内嵌套块级元素的场景 */
td {
vertical-align: middle;
}
td div {
/* 确保块级元素内部的文字也垂直居中 */
display: flex;
align-items: center;
}
兼容旧版本浏览器的方案
如果需要兼容非常旧的浏览器，还可以使用表格本身的布局特性来实现，给表格设置display: table，单元格设置display: table-cell，再配合vertical-align: middle，这种方案的兼容性更好。
<style>
.table-box {
display: table;
border: 1px solid #ccc;
}
.table-row {
display: table-row;
}
.table-cell {
display: table-cell;
vertical-align: middle;
border: 1px solid #ccc;
padding: 8px;
}
</style>
<div class="table-box">
<div class="table-row">
<div class="table-cell">单行内容</div>
<div class="table-cell">多行内容多行内容多行内容多行内容多行内容多行内容</div>
</div>
</div>
注意事项
vertical-align属性只对行内元素、行内块元素和表格单元格元素生效，对普通的块级元素无效。- 如果表格设置了
height固定高度，vertical-align: middle会基于这个固定高度做居中，效果更稳定。 - 不要同时给单元格设置过大的
line-height，否则可能会覆盖垂直居中的效果，导致对齐异常。
table_vertical_alignCSS_tablevertical-alignHTML_table修改时间：2026-07-20 10:48:21