只设text-align:center不行，因它仅控制水平对齐且对块级子元素无效；vertical-align:middle必须作用于td/th才生效，配合border-collapse:collapse才能避免双线边框干扰居中效果。
直接给 <td> 或 <code><th> 加 <code>text-align: center 和 vertical-align: middle 就能解决绝大多数内容居中需求，但必须注意作用对象和配套设置，否则会失效或冲突。
为什么只设 text-align: center 不行？
因为 text-align 只控制水平方向，且仅对行内级内容（如文字、<span></span>）生效；它对垂直方向完全无效。更关键的是：如果单元格里嵌了 <p></p>、<div> 或图标组件，这些块级元素可能自带 <code>margin 或 line-height，会把视觉位置顶偏。
-
vertical-align: middle必须写在<td> 或 <code><th> 上——写在 <code><tr> 或 <code><table> 上无效 <li>若单元格内有多个子元素（比如图标+文字），建议统一用 <code>display: flex; align-items: center; justify-content: center替代vertical-align，但要注意 IE11 不支持 - 避免混用旧式
align="center"和 CSS，浏览器解析优先级不一致，容易覆盖或忽略 - 只给
<td> 设 <code>border不够，<th> 也得统一设，否则表头和数据行边框粗细/颜色不一致 <li> <code>border-collapse: collapse要写在<table> 元素上，不是 <code><td> <li>设了 <code>collapse后，border-spacing会被忽略，无需再调这个值 <th> 默认 <code>vertical-align: middle，但<td> 也是 <code>middle，若内容看起来“太高”，可单独给<td> 改成 <code>vertical-align: top或baseline- 如果用了响应式布局，注意
white-space: nowrap或min-width可能让左对齐内容撑开列宽，造成视觉偏右 -
width: 100%+margin: 0 auto没意义——它已经占满父容器，左右没空间可分 - 优先用
width: fit-content配合margin: 0 auto，比固定像素更安全；但 iOS Safari 对fit-content支持需加-webkit-fit-content - 如果父容器是
flex或grid，直接用父级justify-content: center，别在<table> 上硬加 <code>width和margin - 检查是否有
overflow-x: auto父容器，它会让<table> 脱离正常流，<code>margin: 0 auto失效真正麻烦的从来不是写哪几行 CSS，而是忘记
<table> 默认是块级但无固有宽度，或者没意识到 <code>vertical-align只对table-cell生效——这些隐性约束，才是居中失败最常藏身的地方。
border-collapse: collapse 为什么必须加？
不加的话，表格默认是 border-collapse: separate，单元格之间有 border-spacing（等价于旧 cellspacing），导致相邻边框看起来像双线，视觉上“加粗”，尤其在设了居中对齐后更显突兀。
表头居中、内容居左怎么分开控制？
不能靠全局 text-align: center，必须分别定义 <th> 和 <code><td> 的样式，否则默认左对齐的 <code><td> 也会被拉到中间。
<ul>
<li>推荐用 CSS 类而非内联样式，例如：<code>.table-header-center th { text-align: center; } + .table-content-left td { text-align: left; }
移动端表格居中容易踩的坑
用 margin: 0 auto 让整个表格居中时，在小屏上极易失效，不是代码错了，而是宽度逻辑变了。
