text-align作用对象必须是td或th，而非tr或table；因tr不渲染内容，该样式不会继承到单元格，浏览器仅识别td/th上的设置。
text-align 作用对象必须是 td 或 th，不是 tr 或 table
很多人给 <tr> 加 <code>style="text-align: center;"，结果没生效——因为 tr 本身不渲染内容，text-align 不会向下继承到单元格。浏览器实际只认 td 和 th 上的该样式。
实操建议：
- 对单列统一控制：用
<col>标签配合类名，例如<col class="center-col">，再写 CSS：.center-col { text-align: center; } - 对整表所有列生效：
td, th { text-align: center; }（推荐放在外部样式表或<style></style>块中） - 避免在
<table> 上设 <code>text-align试图“一劳永逸”——它确实会继承，但容易被更具体的选择器（比如td自身的样式）覆盖，排查困难用
colgroup+col控制特定列最稳定当表格列数固定、且只需某几列居中时，
<colgroup></colgroup>是语义清晰又不易被覆盖的方式。它直接绑定列结构，不受后续 DOM 变动影响。示例：
A B C CSS 中定义：
.right-col { text-align: right; }注意：
<col>不支持vertical-align，垂直居中仍需单独在td/th上设置。内联样式
style="text-align: center;"在td上有效，但别滥用临时调试或动态生成表格时，直接写
<td style="text-align: center;">内容</td>确实最快。但它把样式逻辑混进结构，维护成本高，且易被 JS 操作覆盖（比如某些表格插件会重写innerHTML并丢弃内联样式）。常见错误现象：
- 用 JS 动态插入
td后发现没居中——检查是否漏写了style属性，或被框架默认样式覆盖 - 移动端 WebView 渲染异常，尤其在旧版 Android 系统里，内联样式优先级可能低于预置 UA 样式
- 和
direction: rtl共存时，text-align: center依然有效，但若父级有dir="rtl"，视觉上文字顺序会反，别误判为居中失效
为什么给
td设margin: 0 auto不能居中文本？td默认是display: table-cell，而 W3C 规范明确禁止对该显示类型设置margin。写上去完全无效，开发者工具里也看不到计算值。如果你真想让某列内容“视觉上更居中”，可考虑：
- 加
padding-left和padding-right对称值，但这是“模拟居中”，非真正对齐 - 单元格内嵌
<div style="margin: 0 auto; width: fit-content;">内容</div>—— 这依赖div的块级行为，但会破坏表格语义，且在窄屏下可能换行错位 - 改用 Flex：给
td加display: flex; justify-content: center;，但注意这会让vertical-align失效，垂直方向需额外配align-items: center
真正可靠的做法，始终是回到
text-align作用于td或其父级col—— 它不依赖 display 类型变更，兼容性好，且符合表格语义。 - 用 JS 动态插入
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
