图片在td中不居中应设置td的text-align: center和vertical-align: middle，而非给img加margin: 0 auto或display: block，因table-cell布局下这些对img无效。
表格单元格里图片不居中？先看 td 默认行为
表格单元格（td）默认是 display: table-cell，它自带 vertical-align: middle，但这个只对“行内内容”垂直居中有效——而 img 在没加样式时是 inline 元素，所以垂直方向通常看起来还行；但水平方向它会贴左，margin: 0 auto 完全无效，因为 inline 元素不响应左右 auto 外边距。
-
text-align: center加在td上，能水平居中图片（把它当文字排版） -
vertical-align: middle是td默认值，一般不用额外写，但若你改过父级td的vertical-align（比如设成top），就得手动重置 - 别给
img加display: block后再套margin: 0 auto——在td里这招会失效，因为table-cell的宽度计算逻辑和普通块容器不同
margin 在 td 内对图片无效的典型场景
很多人试过给图片加 style="margin: 0 auto;"，发现毫无反应。这不是浏览器 bug，而是 CSS 规范限制：只有「块级元素 + 有明确宽度 + 在常规流中」才触发 margin: auto 水平居中。而 td 是 table-cell，它的子元素即使设了 display: block，其宽度仍受表格布局约束，auto 无法计算参照。
- 错误写法：
<td><img src="x.jpg" style="display: block; margin: 0 auto;"></td>→ 图片可能被拉宽或左对齐不动 - 正确思路：居中操作放在
td上，不是img上 - 如果非要加
margin调整微偏移（比如右移 5px），可以用margin-left: 5px，但别依赖auto
兼容老浏览器的稳妥写法：text-align + vertical-align
这是目前最通用、零 JS、无 flex 依赖的方案，所有 IE8+ 和现代浏览器都支持。
- 给
td加style="text-align: center; vertical-align: middle;" - 确保
img没设float、position: absolute或display: block（除非你真需要块级行为且愿意处理后续换行问题） - 如果图片高度超出
td行高，vertical-align: middle仍有效，但视觉上可能被截断——这时要检查td是否有height或min-height限制
想用 Flex？注意 td 不是普通容器
直接给 td 设 display: flex 会破坏表格布局，导致整行错位甚至渲染异常。浏览器对 table-cell 应用 flex 的支持不一致，Chrome 可能勉强工作，Safari 和旧 Edge 会忽略或报错。
立即学习“前端免费学习笔记（深入）”；
- 替代方案：把图片包一层
div，再给这个div设display: flex，但必须确保div宽高占满td（比如加width: 100%; height: 100%） - 更稳妥的做法：放弃在
td内用 flex，改用上面的text-align+vertical-align组合 - 如果整个表格都不需要原生表格语义（比如只是用来做网格布局），直接用
div+ flex 更干净
line-height）和图片尺寸冲突时，vertical-align: middle 的“中点”是基于行高算的，不是基于 td 高度。如果图片很高，又没设 td 显式高度，结果往往不是你想要的“单元格正中”。 
