表格整体居中需设 width 并用 margin: 0 auto，单元格内容左对齐须单独设置 td { text-align: left }，二者分层控制、互不影响。
表格整体居中但单元格内容左对齐
直接给 <table> 加 margin: 0 auto 只能解决整体水平居中，不影响内部文字对齐；而 text-align: left 写在 <table> 上对 <td> 无效（text-align 不继承到表格单元格）。必须分层控制：外层居中靠 CSS 布局，内层对齐靠单元格样式。
用 margin: 0 auto 实现表格居中（必须设宽度）
这是最轻量、兼容性最好的方案，但极易因漏写宽度而失效：
-
width必须显式设置，比如width: 800px或width: 90%；写width: 100%会导致左右无剩余空间，auto失效 - 确保
<table>是块级元素（默认就是），不被display: inline-table或float覆盖 - 父容器不能是
display: flex或display: grid，否则会接管对齐逻辑，margin: 0 auto被忽略
示例：
<table style="width: 600px; margin: 0 auto;">
让 th/td 内容统一左对齐（避免误伤表头）
别用 table { text-align: left }——它对 <th> 和 <td> 都不起作用。正确做法是分别选中：
立即学习“前端免费学习笔记（深入）”；
- 只对内容单元格生效：
td { text-align: left; } - 如果表头也要左对齐，单独加：
th { text-align: left; }；若想表头居中、内容左对齐，就分开写两个规则 - 避免写成
table th, table td这种组合选择器，容易在嵌套表格里意外影响子表格 -
vertical-align: top或middle可控垂直对齐，但默认就是middle，一般不用动
Flex 布局下表格居中更稳，但要注意副作用
当父容器已用 Flex 时，强行给 <table> 加 margin: 0 auto 没用。此时应：
- 给父容器（如
<div>）加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 } 该生效还是生效——对齐控制永远在单元格层级，不在容器布局层级。
