用 hover 配合 transform: scale() 实现放大效果时，需设 transform-origin: center 并避免 width/height 过渡，以防止错位抖动；对行内元素应统一 vertical-align 或转为 block，确保缩放稳定。
用 hover 配合 transform: scale() 实现放大效果时，如果只写 scale() 而没处理好基准点和布局流，文字就容易“跳”或“错位”，尤其在内联元素、行内块或带默认 vertical-align 的场景下特别明显。核心不是“不让它动”，而是让缩放更可控、更稳定。
确保缩放中心点准确（避免偏移）
默认情况下，transform: scale(1.2) 是以元素左上角为原点缩放的，这会让整个元素向右下方“撑开”，看起来像位置偏移。解决方法是统一设为居中缩放：
- 加
transform-origin: center;—— 让缩放围绕自身中心进行 - 对图片、图标等替换元素，建议同时设
display: block;或vertical-align: middle;避免行内默认基线对齐干扰
用 transform 替代 width/height + transition（避免重排）
如果 hover 时改的是 width 和 height，浏览器会触发 layout（重排），导致文字重绘抖动、甚至父容器高度突变。正确做法是只用 transform：
- ✅ 推荐：
transition: transform 0.3s ease;+transform: scale(1.1); - ❌ 避免：
transition: width 0.3s, height 0.3s;—— 易引发错位和性能问题 - 注意：
transform不影响文档流，缩放后不会挤占其他元素空间，视觉更干净
文字本身不“晃”的小技巧
即使容器缩放稳定，内部文字仍可能因字体渲染、行高变化或子元素 vertical-align 差异而微移。可针对性加固：
立即学习“前端免费学习笔记（深入）”；
- 给文字容器设固定
line-height和font-size，避免缩放时行高比例失衡 - 若文字是
inline元素（如span），外层包一层display: inline-block;并设vertical-align: top/middle; - 对按钮类组件，直接给
button或a加transform: scale()，别作用在内部span上
完整轻量示例（可直接参考）
.card {
display: inline-block;
vertical-align: top;
transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transform-origin: center;
}
.card:hover {
transform: scale(1.08);
}
.card p {
margin: 0;
line-height: 1.4;
font-size: 14px;
}
基本上就这些。关键不是堆属性，而是理解 transform 的合成层行为和 vertical-align 对行内布局的真实影响。错位大多出在“没切断默认对齐逻辑”和“混用 layout 属性缩放”上。
