表格整体居中需设 width 并用 margin: 0 auto，单元格内容左对齐须单独设置 td { text-align: left }，二者分层控制、互不影响。
表格整体居中但单元格内容左对齐
直接给 <table> 加 <code>margin: 0 auto 只能解决整体水平居中，不影响内部文字对齐；而 text-align: left 写在 <table> 上对 <code><td> 无效（<code>text-align 不继承到表格单元格）。必须分层控制：外层居中靠 CSS 布局，内层对齐靠单元格样式。
用 margin: 0 auto 实现表格居中（必须设宽度）
这是最轻量、兼容性最好的方案，但极易因漏写宽度而失效：
-
width 必须显式设置，比如 width: 800px 或 width: 90%；写 width: 100% 会导致左右无剩余空间，auto 失效
- 确保
<table> 是块级元素（默认就是），不被 <code>display: inline-table 或 float 覆盖
- 父容器不能是
display: flex 或 display: grid，否则会接管对齐逻辑，margin: 0 auto 被忽略
示例：
让 th/td 内容统一左对齐（避免误伤表头）
别用 table { text-align: left }——它对 <th> 和 <code><td> 都不起作用。正确做法是分别选中：
<ul>
<li>只对内容单元格生效：<code>td { text-align: left; }
如果表头也要左对齐，单独加：th { text-align: left; }；若想表头居中、内容左对齐，就分开写两个规则
避免写成 table th, table td 这种组合选择器，容易在嵌套表格里意外影响子表格
vertical-align: top 或 middle 可控垂直对齐，但默认就是 middle，一般不用动
Flex 布局下表格居中更稳，但要注意副作用
当父容器已用 Flex 时，强行给 <table> 加 <code>margin: 0 auto 没用。此时应：
- 给父容器（如
<div>）加 <code>display: flex; justify-content: center;
- 表格本身无需额外样式，但注意：Flex 会让它变成 flex item，
width 百分比可能按 flex 容器算，而非原始父宽
- 如果表格里有
colspan 或固定列宽，Flex 不会影响内部布局，但父容器的 align-items 会影响表格整体垂直位置
- 慎用
align-self: center 在表格上——它只对 flex item 生效，且可能和父容器的 align-items 冲突
真正容易被忽略的是：表格内容左对齐这件事，和它怎么居中完全无关。哪怕你用 Grid 或绝对定位把表格钉在页面正中，td { text-align: left } 该生效还是生效——对齐控制永远在单元格层级，不在容器布局层级。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
