th元素默认text-align: center，但易被父级text-align或CSS重置覆盖；需显式声明th { text-align: center; }确保居中，vertical-align: middle对其有效，但块级子元素需flex布局。
th 元素默认就是居中，但容易被覆盖
<th> 默认 text-align: center，这是浏览器 UA 样式表决定的。所以不写任何 CSS 时，表头文字看起来已经居中了。但一旦你给 <table> 或父容器加了 text-align: left，或者用了全局重置（比如 * { text-align: left; }），<th> 就会跟着变左对齐——这不是它失效了，而是被继承覆盖了。
常见踩坑点：
- 在
<table>上写了style="text-align: left"，结果所有<th>都左偏了 - 用 CSS 重置库（如 normalize.css）后没单独声明
th { text-align: center; } - 给
<tr>加了text-align，而<th>会继承该值（除非显式覆盖）
强制统一表头居中：用 CSS 类或选择器精准控制
别依赖默认行为，显式写死最稳。推荐直接作用于 <th>，而不是靠继承或父级 text-align。
- 全表统一：
th { text-align: center; } - 只影响某列：
th:nth-child(3) { text-align: right; }（第三列表头右对齐） - 语义化类名：
<th class="header-numeric">金额</th>+.header-numeric { text-align: right; font-family: monospace; } - 注意：不要写
table th { ... }这种冗余选择器，除非你要提高优先级对抗其他规则
vertical-align: middle 对表头垂直居中无效？检查 height 和 line-height
vertical-align: middle 在 <th> 上是有效的，但它只对“行内盒”起作用。如果表头内容单行、无 padding、且 height 设得太小，视觉上仍可能偏上。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 避免硬设
height: 20px—— 改用padding: 8px 12px更自然 - 确保
line-height不小于容器可用高度；若设了height，建议同步设line-height: normal或具体数值（如line-height: 24px） -
vertical-align不影响块级子元素（比如<th><div>xxx</div></th>），此时需改用 flex：th { display: flex; align-items: center; justify-content: center; }
caption 标题和 th 标题不是一回事，别混用
<caption> 是表格整体标题，显示在表格上方，默认居中；而 <th> 是列/行头部单元格。两者定位层级、语义、可访问性角色都不同。
- 想让「销售统计表」这几个字居中显示在表格顶部？用
<caption>销售统计表</caption> - 想让「产品名称」「单价」「数量」这些列名居中？必须操作每个
<th> -
<caption>的居中由浏览器默认样式控制，但可被 CSS 覆盖：caption { text-align: left; caption-side: bottom; }
真正容易被忽略的是：表头居中问题，90% 不是样式没写对，而是被外层 text-align、CSS 重置、或意外的 display 变更悄悄劫持了。动手前先打开开发者工具，看 computed 栏里 text-align 的最终值从哪来。
