text-align: center 和 vertical-align: middle 必须作用于 td 或 th 才有效，因 table 是块级元素，其内部文本不在其行内流中；整表居中应使用 table td, table th { text-align: center; vertical-align: middle; }。
text-align: center 和 vertical-align: middle 是让表格文字居中对齐最直接有效的组合，但必须作用在正确的元素上——不是 table，而是 td 或 th。
为什么 text-align: center 加在 table 上没用？
因为 text-align 控制的是“块内行内内容”的水平对齐，table 本身是块级元素，但它内部的文本不在它的“行内流”里，而是在子元素 td 里。加在 table 上等于对空气设样式。
- 错误写法：
<table style="text-align: center">...</table>→ 文字不动 - 正确写法：
<td style="text-align: center; vertical-align: middle">内容</td> - 如果整张表都要居中，应统一作用于
td, th，而非table
如何一次性让整张表所有单元格文字都居中？
用 CSS 类或选择器批量控制，避免每个 td 都写内联样式。关键是选对作用目标：
- 推荐写法：
table td, table th { text-align: center; vertical-align: middle; } - 注意：不要漏掉
th，否则表头仍靠左 - 若表格有嵌套（比如
td里再套div），则text-align不会穿透到那个div内部，需单独设 - 如果用了
border-collapse: collapse，不影响居中逻辑，但能避免双线干扰视觉判断
vertical-align: middle 为什么有时看起来没居中？
它只对单元格内的“行内盒”起作用，实际效果受行高、字体大小、padding 甚至上下空行影响。常见假象：
- 单元格
height太小（比如height: 20px），而文字行高默认约 1.2 倍字号，导致垂直方向挤不下 - 没设
line-height，或line-height小于容器高度，造成基线偏移 - 单元格含多行文本时，
vertical-align: middle对齐的是“整行盒”的中点，不是每行文字中心 —— 这是正常行为，不是 bug - 解决办法：适当加
padding（如padding: 8px 12px）比硬调height更可靠
要不要用 Flex 或 Grid 替代 vertical-align？
可以，但没必要。表格单元格天然支持 vertical-align，这是 HTML 表格语义的一部分；强行用 display: flex 改写 td 会破坏表格结构语义，屏幕阅读器可能无法正确识别行列关系。
- 仅当表格已退化为“视觉布局工具”（比如纯展示无行列逻辑）时，才考虑用
div + flex模拟 - 若真要用，必须把
td设为display: flex; align-items: center; justify-content: center;，且确保父tr不限制高度 - 但此时建议直接放弃
table标签，改用语义更清晰的结构
真正容易被忽略的点：居中效果是否生效，第一眼要检查浏览器开发者工具里，目标 td 元素上最终计算出的 text-align 和 vertical-align 值是否被其他 CSS 覆盖 —— 很多时候不是写错了，是被重置样式或框架默认规则悄悄干掉了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
