th不加粗不居中是因默认样式被覆盖、字体字重缺失或继承干扰；应显式声明font-weight:bold和text-align:center，配合min-width与white-space控制响应式表现。
th 标签本身就能自动实现加粗和居中，但“自动”不等于“可靠”——浏览器默认样式可能被覆盖、重置或忽略，实际渲染常出偏差。
为什么 th 有时不加粗也不居中？
不是你写错了，而是默认行为被干扰了：
- 全局 CSS 重置（如 Normalize.css 或某些 UI 框架）清除了
th的font-weight和text-align默认值 -
table或父容器设置了font-weight: normal，且选择器权重更高，导致继承覆盖 - 用了 Web 字体但只加载了
font-weight: 400，没提供700（即 bold），浏览器 fallback 到普通字重 - 在 DevTools 中检查 computed 样式，发现
font-weight是400而非700或bold，就说明加粗已失效
最稳妥的写法：显式声明 font-weight 和 text-align
别依赖浏览器默认，直接写死关键样式：
th {
font-weight: bold;
text-align: center;
}
如果只给部分表头用，加类名更安全：
<th class="header-center">用户ID</th>
对应 CSS：
.header-center {
font-weight: bold;
text-align: center;
}
注意：text-align: center 只作用于单元格内容的**行内宽度**；若表格用了 table-layout: fixed 或列宽极小，文字换行后“居中”会变成每行居中，视觉上仍偏左。
响应式或窄屏下 th 居中错位怎么办？
小屏滚动表格时，th 宽度被压缩，text-align: center 失效明显：
- 加
white-space: nowrap防止换行（适合短表头，如“姓名”“日期”） - 设
min-width: 120px锁定最小宽度，再配合text-align: center - 极端情况（如竖排表头）需用
writing-mode: vertical-rl，并手动调text-align和vertical-align
真正容易被忽略的是像素级视觉偏差——不同字体、不同设备的度量差异会让“CSS 居中”和“人眼觉得居中”差 1–2px，设计验收时才暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
