根本原因是标题布局上下文变化；应将text-align: center设在共享父容器而非各h2上，用flex时需固定标题栏宽度或分离布局，margin: 0 auto需配合display: block和明确宽度。
h1 到 h6 这类标题元素本身是块级元素，默认左对齐；切换选项卡时如果标题位置“跳动”或“偏移”，根本原因不是“切换逻辑”出了问题，而是每次渲染时标题的布局上下文发生了变化——比如父容器宽度收缩、display 被重置、或 text-align 被覆盖。
下面分几种常见场景说清楚怎么做、为什么、以及容易踩的坑：
tab 切换后标题突然左偏，大概率是父容器 text-align 被重置了
很多 UI 库（如 Bootstrap、Ant Design）在 tab 面板切换时会动态插入/移除 DOM 或切换 display: none / block。一旦某个 tab 的外层容器没有统一设置 text-align: center，而只是给初始 tab 的标题加了该样式，切换后新 tab 的父容器就可能回退到浏览器默认的 text-align: start（即左对齐）。
- 正确做法：把
text-align: center写在所有 tab 共享的父容器上，而不是写在每个h2标签里 - 错误写法：
<h2 style="text-align:center">Tab 1</h2>→ 切换后新h2没这个内联样式，就左对齐了 - 检查点：用浏览器开发者工具看切换前后，标题的 computed
text-align值是否一致；重点盯父容器的text-align
用 flex 实现 tab 标题栏居中，但切换后标题错位
如果你把 tab 标题（如 <button></button> 或 <span></span>）放在一个 display: flex 容器里，并靠 justify-content: center 居中，切换时标题“晃动”或“挤到一边”，通常是因为容器宽度不稳定。
- 常见诱因：tab 内容区高度不一致，导致整个 tab 区域高度变化 → 父容器（尤其是带
min-height或height的）被撑开/收缩 → flex 容器宽度波动 →justify-content: center的参考基准变了 - 解决方向：给 tab 标题栏容器加固定宽度（如
width: 100%），或设flex-shrink: 0防止压缩 - 更稳的做法：标题栏和内容区分离，标题栏用
position: sticky或独立flex容器，避免受内容高度影响
tab 标题用了 margin: 0 auto 却不居中
有人试图给每个 tab 的标题加 margin: 0 auto，结果只在第一个 tab 生效，切换后失效——这是因为 margin: 0 auto 要求元素有明确宽度，且不能是 display: inline 或脱离文档流。
- 典型错误：tab 标题是
<span></span>或未设display: block，此时margin: 0 auto完全无效 - 补救方式：强制设
display: block+width: fit-content（或具体像素值），再加margin: 0 auto - 但注意：
fit-content在旧版 Safari 中支持不好，可降级为max-content或用inline-block+ 父容器text-align: center
响应式 tab 下标题居中失效
小屏幕下 tab 标题换行、文字变多、字体缩放，都可能导致原本居中的标题视觉偏移。这不是 bug，是 text-align: center 依然生效，但“中心”变了——比如换行后，最长一行决定容器宽度，而标题文字实际占据区域不对称。
- 验证方法：给标题加
background: rgba(0,0,0,0.1)，看背景块是否始终居中 - 真正要居中的是“视觉重心”，不是“文字行”，这时建议用
display: flex+justify-content: center替代纯text-align - 额外提醒：iOS Safari 对
text-align: center在flex子项里的继承行为偶有异常，直接写在标题上比依赖父容器更可靠
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
