HTML5中align和valign属性已废弃，应使用text-align控制水平对齐（作用于td/th）、vertical-align控制垂直对齐（需配合显式高度），复杂内容推荐flex布局，并用语义化CSS类统一管理。
HTML表格单元格对齐不能只靠 align 或 valign 属性——它们在HTML5中已被废弃，浏览器虽仍兼容，但会导致校验失败、维护困难，且无法应对响应式或嵌套内容场景。
text-align 控制水平对齐必须作用于 td 或 th 元素本身
很多人误以为给 table 设置 text-align: center 就能统一控制所有单元格文本居中，其实它只影响行内内容（如纯文本、span），对块级子元素（如 div、p）无效。真正生效的是直接作用于单元格的样式。
-
text-align: center使单元格内行内内容水平居中；text-align: right常用于数值列，提升可读性 - 若单元格内有
div且希望该div居中，需额外对其设置margin: 0 auto或display: flex; justify-content: center - 避免在
tr上设text-align：部分旧版IE可能不继承，应直接写在td/th或用类选择器批量控制
vertical-align 只对 td/th 有效，且依赖单元格高度
vertical-align: middle 是实现垂直居中的最常用方式，但它不是“绝对居中”，而是相对于单元格的基线或行高位置计算。如果单元格没显式高度或内容撑不满，效果会“看不见”。
- 必须将
vertical-align应用于td或th，对table或tr设置无效 - 若单元格含多行文本或图片，
vertical-align: middle会让整块内容在单元格内垂直居中；baseline则按第一行文字基线对齐，适合混合图文场景 - 当垂直居中不明显时，先检查是否设置了
height或足够padding—— 否则单元格实际高度可能仅等于单行文字行高
复杂内容对齐要用 display: flex 替代 vertical-align
当单元格里塞了按钮、图标+文字、带边框的徽章等复合结构，vertical-align 往往力不从心。此时把单元格变成 flex 容器更可控。
立即学习“前端免费学习笔记（深入）”；
- 给
td添加style="display: flex; align-items: center; justify-content: center;"，即可真正居中任意子元素 - 若只需垂直居中、水平左对齐，用
align-items: center; justify-content: flex-start - 注意：flex 会覆盖
vertical-align，且要求父元素（即单元格）是display: table-cell（默认值），无需额外声明 - 慎用于大量单元格：每个 flex 容器都会增加渲染开销，简单文本仍优先用
vertical-align
全局对齐策略建议用 CSS 类而非内联 style
在真实项目里，你不会给每个 td 都写 style="text-align: right; vertical-align: middle;"。重复代码难维护，也容易漏改。
- 定义语义化类名，比如
.numeric（右对齐+等宽字体）、.status-cell（居中+背景色+圆角） - 用组合选择器精准控制范围：
table.data-table td.numeric比泛泛的td更安全，避免污染其他表格 - 数值列推荐加
font-variant-numeric: tabular-nums，让数字等宽对齐，比单纯text-align: right更专业
真正麻烦的从来不是“怎么写一行居中代码”，而是当表格要适配移动端、要导出 PDF、要支持键盘导航时，vertical-align 和 text-align 的行为边界在哪——这些地方，flex 未必是银弹，但至少不会静默失效。
