td内块级元素不居中需用flex布局：设td为display: flex + align-items: center + justify-content: center；text-align和vertical-align对块级子元素无效，仅适用于行内内容或替换元素。
td里嵌套div/p/img等元素不居中？别只靠text-align
text-align: center只能让行内内容（文本、图片、span）水平居中，对
、加了text-align: center，但里面套了个
这类块级子元素完全无效。你给
，它依然左贴边——这是最常被忽略的前提。
- 块级子元素要居中，必须在它自己身上设
margin: 0 auto（需有明确宽度）或display: flex; justify-content: center - 如果里还有文字，它内部的text-align才起作用；外部
td的text-align不穿透vertical-align: middle对块级子元素也无效——它只作用于行内盒和替换元素（如img）- 常见错误：
<td><div style="text-align: center">文字</div></td>→ 这个div会撑满单元格宽度，text-align没意义需要真正居中任意结构？用flex布局直接改td
当单元格里塞了图标+按钮+文字这种组合，
vertical-align基本失效，此时把td变成flex容器是最可控的解法。- 给
td加style="display: flex; align-items: center; justify-content: center;"，子元素无论多少层、什么类型，都能双向居中 - 只需垂直居中、水平左对齐？用
align-items: center; justify-content: flex-start - 注意：
display: flex会覆盖vertical-align，且不影响表格语义——td默认就是display: table-cell，flex是叠加行为 - 性能提醒：全表几百个单元格都开flex，渲染开销会上升；纯文本场景仍优先用
text-align+vertical-align
vertical-align: middle为什么看起来没效果？检查这三件事
vertical-align: middle不是“绝对垂直居中”，它依赖参照基准。视觉上偏上偏下，大概率不是样式没生效，而是下面某个条件没满足。- 单元格没显式高度或足够
padding：内容撑开的高度≈单行文字行高，middle无处可对齐。建议用padding: 8px 12px代替height: 24px -
line-height干扰：若line-height小于单元格高度，基线位置会偏移；设为line-height: 1.5或与padding配合更稳 - 多行文本时，
vertical-align: middle对齐的是整块“行盒”的中点，不是每行文字中心——这是标准行为，不是bug
table整体居中和td内容居中是两回事
很多人把
table外层加text-align: center，发现表格自己居中了，就以为单元格内容也居中了。其实这是两个层级：一个是表格在页面中的定位，一个是单元格内部的排版。立即学习“前端免费学习笔记（深入）”；
- 让整个表格居中：给
table加margin: 0 auto，并确保它有明确宽度（如width: fit-content或max-width: 800px） - 让单元格内容居中：必须在
td或th上设text-align: center和vertical-align: middle，漏掉th会导致表头靠左 - 别在
tr或table上设text-align——它不会继承到所有单元格，部分旧IE还不支持
td里混用块级和行内结构时，对齐逻辑会分层生效，而不是“一设全中”。
