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