caption 居中需直接设置其 text-align: center 且保持 display: table-caption，caption-side 控制上下位置，避免被 flex/grid 父容器干扰。
表格标题（<caption></caption>）居中显示，不是靠给 <table> 加 <code>text-align: center，也不是用 align="center"（HTML5 已废弃），而是直接控制 <caption></caption> 元素本身的 CSS 属性。
caption 默认居中，但需确认 display 和 text-align
<caption></caption> 是块级元素，默认在表格上方水平居中，但这个“居中”依赖于其默认 display: table-caption 和 text-align: center。一旦被其他样式覆盖（比如重设了 display: block 或 text-align: left），就会失效。
- 不要写
<caption align="center"></caption>—— HTML5 不再支持，部分浏览器已忽略 - 检查开发者工具里
<caption></caption>计算后的text-align是否仍为center - 如果用了自定义 class，确认没意外继承了父级的
text-align: left - 若想强制生效，直接加内联样式：
<caption style="text-align: center;"></caption>
caption 垂直位置控制：top / bottom
<caption></caption> 的上下位置由 caption-side 决定，默认是 top；设为 bottom 会移到表格下方，但依然水平居中。
- 写法：
<caption style="caption-side: bottom; text-align: center;"></caption> - 注意：
caption-side只对display: table-caption有效，改成了block就失效 - 不支持
margin-top直接推离表格 —— 它是表格的固有部分，不是普通子元素
避免 caption 被 flex/grid 父容器“拉偏”
如果 <table> 被包在 <code>display: flex 或 display: grid 容器里，而你又没给 <caption></caption> 单独设样式，它可能被父容器的 justify-content 或 place-items 干扰，出现意外偏移。
- 解决方案：给
<caption></caption>显式加text-align: center，覆盖继承值 - 不要依赖父容器居中逻辑来“带动” caption —— 它的居中语义是独立的
- 若 caption 文字过长换行，
text-align: center仍保证每行居中，无需额外处理
真正容易被忽略的是：caption 的居中行为和 table 自身的 margin 居中无关，也和 td 的 text-align 无关；它是一套独立渲染规则，改错地方就白调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
