:only-child能直接解决单图居中问题，因其要求img是父元素唯一子节点（含文本、注释等），满足时精准命中并应用样式；但易因空白节点失效，需确保DOM结构绝对干净或改用:only-of-type。
为什么 :only-child 能直接解决单图居中问题？
因为当容器里只有一张图片时，img 元素天然满足“父元素中唯一子元素”这一条件，img:only-child 就能精准命中，避免误选多图场景下的其他 img。它不依赖类名、不需 JS 判断数量，纯 CSS 响应式生效。
img:only-child 居中写法及关键限制
最简可行写法如下：
img:only-child {
display: block;
margin: 0 auto;
}
但必须注意以下三点，否则样式不生效：
- 父容器不能有空格、换行符或注释——HTML 中的空白文本节点会让
img失去“唯一子元素”身份 -
img必须是父元素的**直接子元素**；若套了<div><img></div>，则匹配的是div，不是img - 不能同时存在其他标签（如
<p>、<span>），哪怕只是辅助性文字或图标
和 text-align: center 或 flex 的区别在哪？
img:only-child 是条件触发式控制，只在“真·单图”时启用；而 text-align: center 会无差别居中所有行内子元素，display: flex 则对所有子元素统一居中。三者适用场景不同：
立即学习“前端免费学习笔记（深入）”；
- 用
text-align: center：父容器内全是行内内容，且你接受多图也居中 - 用
display: flex：需要稳定控制整个容器布局，不关心子元素数量 - 用
img:only-child：明确只想给“仅一张图”的容器加特殊样式（比如放大、加边框、调间距），其余情况保持默认
容易被忽略的 DOM 细节：空白字符破坏 :only-child
下面这段 HTML 看似只有一张图，但 img:only-child 不会生效：
<div> <img src="a.jpg"> </div>
原因：换行 + 缩进产生了两个文本节点（开头换行、结尾换行），img 实际上有两个兄弟节点。修复方式只有两种：
- 删掉所有换行和缩进，写成
<div><img src="a.jpg"></div> - 改用
img:only-of-type（前提是父容器没有其他img，但允许有p、span等）
实际项目中，服务端模板或 CMS 输出常带不可见空白，这点必须实测验证 DOM 结构。
