:only-child不可靠，因其要求父元素子节点总数严格为1，而换行、空格、注释等文本节点会使childNodes.length≠1；应改用:only-of-type，它仅要求同类型元素唯一，免疫空白节点干扰。
为什么不用 :only-child 处理单张图片居中
因为 :only-child 要求父元素下**只有这一个子节点**，连换行符、空格、注释都会破坏匹配。哪怕 HTML 里只写了一个 <img alt="如何用CSS3的:only-of-type处理单张图片的自适应居中？" >，只要前后有回车或缩进，parentNode.childNodes.length 就不是 1，样式直接失效。React 的 <fragment></fragment>、Vue 模板、服务端模板（如 Nunjucks）几乎必然引入文本节点，现实中基本不可控。
img:only-of-type 才是可靠选择
它只关心“同类型元素是否唯一”，对其他节点完全免疫——父容器里有文字、<div>、注释、空白，只要只有一个 <code><img alt="如何用CSS3的:only-of-type处理单张图片的自适应居中？" >，就能命中。
- 匹配条件：父元素下
<img alt="如何用CSS3的:only-of-type处理单张图片的自适应居中？" >标签数量为 1，不管其他节点是什么 - 典型适用场景：CMS 输出的富文本区块、Markdown 渲染后的内容容器、动态插入的图文卡片
- 不匹配的情况：同一父容器下出现两个
<img alt="如何用CSS3的:only-of-type处理单张图片的自适应居中？" >，或一个<img alt="如何用CSS3的:only-of-type处理单张图片的自适应居中？" >加一个<picture></picture>（<picture></picture>不是<img alt="如何用CSS3的:only-of-type处理单张图片的自适应居中？" >类型，不影响）
结合 object-fit 和响应式尺寸实现自动裁剪居中
单张图片居中 ≠ 单纯水平居中，还要解决宽高比失配、拉伸变形、溢出等问题。object-fit: cover 是核心，但必须配合显式尺寸才生效。
- 必须设置
width和height（固定值或百分比），否则object-fit不起作用 - 推荐用
max-width: 100%+height: auto保比例，再用object-fit: cover+overflow: hidden控制裁剪 - 若需强制容器尺寸（如卡片高度统一），则设容器
min-height，图片用width: 100%+height: 100%+object-fit: cover
.content img:only-of-type {
display: block;
margin: 0 auto;
max-width: 100%;
height: auto;
object-fit: cover;
overflow: hidden;
}
注意父容器的布局上下文干扰
很多情况下样式没生效，不是选择器写错，而是父容器本身限制了居中行为：
立即学习“前端免费学习笔记（深入）”；
- 如果父容器是 flex 容器且设了
justify-content: flex-start，margin: 0 auto会被忽略 - 如果父容器用了
text-align: center，对块级<img alt="如何用CSS3的:only-of-type处理单张图片的自适应居中？" >无效（只影响行内级） - 如果父容器设置了
display: grid或display: table，需确认是否覆盖了默认流 - 检查是否被更高优先级样式（如内联
style或 ID 选择器）覆盖
最稳妥的做法是：在 img:only-of-type 规则里明确写 display: block 和 margin: 0 auto，不依赖父容器的文本对齐或 flex 设置。
