表格单元格内容水平垂直居中最轻量方案是text-align: center + vertical-align: middle，必须作用于<td>或<th>元素，因vertical-align仅对display: table-cell生效；同时需设置table的border-collapse: collapse避免边框双线问题。
如何让表格单元格内容水平+垂直居中
直接用 text-align: center + vertical-align: middle 是最轻量、兼容性最好的方案，但必须作用在 <td> 或 <th> 上，而不是 <tr> 或 <table>。
-
vertical-align只对display: table-cell（即默认的<td>）生效；设在<div>里无效 - 如果单元格内嵌套了
<p>、<span>等块级/行内元素，确保它们没设置margin或line-height干扰对齐 - 避免同时用旧式
align="center"和valign="middle"—— 二者与 CSS 冲突时，浏览器行为不可预测 - 示例写法：
<td style="text-align: center; vertical-align: middle;">数据</td>
为什么表格边框看起来是双线？怎么修复
根本原因是浏览器默认启用 border-spacing（等价于旧属性 cellspacing），导致相邻单元格边框分离、重叠显示。不处理它，哪怕所有 border 都设为 1px，视觉上也会变粗。
- 必须给
<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>
表格整体居中但又不破坏响应式布局
用 margin: 0 auto 最常用，但它要求 <table> 是块级元素且有明确宽度 —— 这点容易被忽略，尤其当表格内容撑开宽度时，居中会失效。
- 给
<table>设width: fit-content比固定像素更安全，它会按内容自动收缩，再配合margin: 0 auto居中 - 若父容器是 flex 或 grid，优先用父级布局控制（如
display: flex; justify-content: center），避免在<table>上硬加 width - 移动端慎用
width: 100%+margin: 0 auto：这会让表格拉满屏幕，失去居中意义 - 检查是否有
float、display: inline-table或overflow-x: auto父容器干扰块级流，这些都会让margin: 0 auto失效
用 Flex/Grid 居中单元格内容是否值得？
值得，但仅限特定场景：比如单元格内含图标+文字+按钮多元素组合，或需要动态高度适配。对纯文本表格，反而增加复杂度和兼容风险。
立即学习“前端免费学习笔记（深入）”；
- Flex 方案：给
<td>加display: flex; align-items: center; justify-content: center—— 注意会破坏vertical-align，且 IE11 不支持部分 flex 属性 - Grid 方案：
display: grid; place-items: center更简洁，但 Safari 旧版本需加-webkit-前缀 - 两者都会让单元格失去默认的 table-cell 行为，可能导致
colspan/rowspan渲染异常 - 结论：简单文本用
text-align+vertical-align；复杂内嵌结构再考虑 flex/grid
border-collapse: collapse 和 vertical-align 的作用对象——它们不是“全局开关”，而是逐个单元格生效的样式，写错一层就白调。 
