直接给<table>加margin: 0 auto居中需满足两个前提：表格必须是块级元素（默认满足），且必须设置明确宽度（如width: fit-content），否则失效；text-align: center和vertical-align: middle须作用于<td>或<th>上才能控制单元格内容对齐，而非表格整体位置。
table 元素自身在页面中水平居中
直接给 <table> 加 margin: 0 auto 是最常用也最容易失效的方案。它生效有两个硬性前提：表格必须是块级元素（默认就是），且必须有明确宽度。
- 写成
<table style="margin: 0 auto;">肯定不居中——因为没设width - 固定像素宽如
width: 700px在内容变化时容易溢出；推荐用width: fit-content，再配margin: 0 auto - 父容器若用了
float、display: inline或position: absolute，会破坏文档流，导致auto失效 - 移动端慎用
width: 100%+margin: 0 auto：它会让表格拉满屏幕，视觉上等于没居中
td/th 内容水平+垂直居中
单元格内容居中和表格整体居中是两件事，不能混用同一套 CSS。最轻量、兼容性最好的组合是 text-align: center + vertical-align: middle，但必须作用在 <td> 或 <th> 上。
-
vertical-align只对display: table-cell生效（即默认的<td>），设在<tr>或<table>上无效 - 如果单元格里嵌了
<p>或其他块级元素，它们自带margin会顶开垂直居中效果，需重置：margin: 0 - 避免同时用旧式属性
align="center"和valign="middle"，与 CSS 冲突时行为不可预测 - 统一控制建议用类：
.center-cell { text-align: center; vertical-align: middle; }
边框双线问题怎么修
表格看起来边框加粗、像“双线”，根本原因不是 border 写多了，而是浏览器默认启用 border-spacing（等价于 HTML 的 cellspacing），让相邻单元格边框分离。
- 唯一可靠解法是给
<table>加border-collapse: collapse - 别只给
<td>设 border，<th>也要统一设，否则表头和数据行边框粗细/颜色可能不一致 -
border-collapse: separate（默认值）下，调border-spacing只能调间距，无法真正合并边框 - 典型写法：
<table style="border-collapse: collapse;"><td style="border: 1px solid #ccc;">内容</td></table>
响应式场景下表格居中更稳妥的做法
当表格列数多、内容长或要适配手机时，硬设 width 很容易破坏布局。此时优先把居中逻辑交给父容器，而不是死磕 <table> 自身。
立即学习“前端免费学习笔记（深入）”；
- 父容器用 Flex 布局：
display: flex; justify-content: center;，<table>别设width: 100%，让它按内容收缩 - 需要垂直居中时，父容器加
min-height: 100vh和align-items: center - 如果父容器本身有
overflow-x: auto（常见于横向滚动表格），margin: 0 auto会失效，改用text-align: center+display: inline-table更稳 - 注意：inline-table 宽度随内容变，不适合需要严格控制尺寸的场景
真正容易被忽略的是：表格居中和单元格内容居中完全独立，但很多人一并设置时没分清作用对象，结果调了半天发现 text-align: center 加在 <table> 上只影响文字，根本不动表格位置。
