图片在表格中不居中，90%是因未正确设置td的text-align:center（控制水平居中）和img的vertical-align:middle（控制垂直居中），且大图硬编码width会撑破表格破坏居中。
图片在表格里不居中，90% 是因为没管好 vertical-align 和父容器的 text-align，而不是表格本身的问题。
为什么 text-align: center 加在 <td> 上才有效
表格单元格（<td> 或 <th>）默认是块级容器，但它的内容（比如 <img>）是行内元素。所以对齐必须作用于容器，而非图片自身。
- 写在
<img>上的text-align: center完全无效 —— 它不是文本容器，不响应这个属性 - 正确做法：给
<td>加style="text-align: center;"，或用类统一控制 - 如果
<td>里还混有文字，这个设置会让文字和图片一起水平居中 - 注意：若
<td>被设了display: flex或float，text-align会失效
vertical-align 控制图片上下位置，不是 align 属性
HTML5 已废弃 align 和 valign 属性，硬写 <img align="middle"> 或 <td valign="middle"> 在现代浏览器里大概率被忽略，甚至触发校验警告。
- 真正起效的是 CSS 的
vertical-align，它只对行内元素和表格单元格生效 - 常用值：
middle（与文本中线对齐）、top、bottom、baseline（默认） - 要让图片在单元格中垂直居中，优先给
<img>设vertical-align: middle; - 如果图片旁有文字，
vertical-align: middle是最稳的选择；纯图单元格也可给<td>加vertical-align: middle;
大图撑破表格？先砍掉硬编码的 width="500px"
表格居中失败、错位、横向滚动，往往不是 CSS 写错了，而是单元格里塞了一张 500px 宽的图，而父容器只有 300px 宽 —— 表格被迫“撑开”，margin: auto 就算写了也无处可居中。
立即学习“前端免费学习笔记（深入）”；
- JavaScript 动态拼接 HTML 时，别在字符串里写
width="500px"这种固定值 - 改用 CSS 控制尺寸：
img { max-width: 100%; height: auto; }，让图随单元格缩放 - 如果表格本身需要居中，确保
<table>有明确宽度（如width: 80%），再配margin: 0 auto; - 避免同时给
<img>设width和max-width，后者可能被前者覆盖
表格里图片居中真正的难点不在“怎么写”，而在“谁该负责对齐”：水平看 <td> 的 text-align，垂直看 <img> 的 vertical-align，而尺寸失控才是破坏布局的隐形推手 —— 别等居中失败了才回头查图片 width 属性。
