用 transform: scale() 居中放大失效主因是父容器未设固定宽高和 overflow: hidden，而非写法错误；需加 display: block 消除基线干扰、显式设 transform-origin: center，并用 @media 区分触屏交互。
直接用 transform: scale() 配合 transform-origin: center 就能实现居中放大，但多数失效不是因为写法错，而是被父容器、display 类型或 overflow 截断了。
为什么 hover 放大不居中？
缩放中心默认就是元素中心（transform-origin: 50% 50%），但视觉上“偏移”通常由以下原因导致：
- 图片是
inline元素，默认有基线（baseline）留白，放大后底部跳动，看起来像中心偏移 - 父容器没设固定宽高 +
overflow: hidden，放大后内容溢出或撑开布局 - 外层用了
flex且align-items: flex-start等，把图片“顶上去”了，实际缩放中心还在原位，但视觉错位 - 图片加了
border或padding但没同步调整transform-origin，导致缩放锚点偏移
怎么写才真正居中放大？
关键不是“加什么”，而是“去掉干扰”。推荐最小可行结构：
.thumb {
width: 300px;
height: 200px;
overflow: hidden;
position: relative;
}
.thumb img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.25s ease;
transform-origin: center;
}
.thumb img:hover {
transform: scale(1.15);
}
-
display: block必须加，干掉 inline 基线干扰 -
overflow: hidden要落在父容器（如.thumb）上，不能只给img -
transform-origin: center显式写出来，比默认值更可控（尤其在有 border/padding 时） - 缩放值建议控制在
scale(1.1)～scale(1.3)，过大容易糊或遮挡相邻元素
移动端 hover 不触发怎么办？
iOS Safari 和多数安卓浏览器里，:hover 对 <img> 默认无效——它不可聚焦。别指望加 tabindex 强行启用，那会破坏语义和可访问性。
立即学习“前端免费学习笔记（深入）”；
- 真要兼容触屏，改用
@media (hover: hover) and (pointer: fine)包裹 hover 样式，对触屏设备降级为点击展开或干脆不启用 - 如果必须支持触摸交互，就放弃纯 CSS 方案，用
mouseenter/mouseleave+requestAnimationFrame控制缩放，同时加pointer-events: none防遮挡 - 别把 hover 当核心功能，它只是增强，不是主交互路径
最常被忽略的其实是父容器尺寸和 overflow 的配合——哪怕 transform 写得再准，父容器没设固定宽高或漏了 hidden，放大效果就等于没做。
