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