文字hover放大不偏移布局的关键是用transform: scale()替代font-size或宽高变化，配合transition和transform-origin控制缩放中心，并确保元素保持原有占位空间。

文字 hover 放大时布局偏移，本质是默认用 font-size 或 width/height 放大会触发重排（reflow），导致周围元素位置变动。最稳妥的解法是改用 transform: scale() 配合 transition，它只触发布局后的重绘（repaint），不改变文档流，自然不挤占空间、不偏移布局。

确保放大不改变原始占据空间

关键在于：放大的元素必须保持原有尺寸占位。只需给元素加 transform: scale(1) 的初始状态，并用 transform-origin 控制缩放中心（如居中缩放更自然）：

• 给文字容器（如 或 ）设 display: inline-block 或 inline-flex（避免 inline 元素对 transform-origin 响应不稳定）
• 设置 transform-origin: center（默认是 center，但显式声明更可靠）
• 初始态写 transform: scale(1)，hover 时写 transform: scale(1.2)

搭配 transition 实现平滑过渡

仅加 transform 不够，需指定过渡属性和时长，否则是瞬时跳变：

• 在常态样式中加 transition: transform 0.2s ease（推荐用 ease 或 cubic-bezier 提升质感）
• 避免写 transition: all 0.2s —— 容易意外触发其他属性动画，影响性能
• 如需更精细控制，可加 will-change: transform（仅在必要时，慎用）

处理 inline 元素的常见坑

纯 等 inline 元素直接 scale 可能因基线对齐（baseline）导致视觉上“上跳”或“下沉”：

立即学习“前端免费学习笔记（深入）”；

• 加 vertical-align: middle 或 top 统一对齐方式
• 或包裹一层 display: inline-block 的父容器，把 transform 放在父层上，子元素保持正常流
• 测试时用浏览器开发者工具勾选 “Layout Shift Regions”，直观查看是否仍有偏移

基本上就这些。核心就一条：用 transform 替代尺寸类属性，守住文档流不动，放大就只是视觉变化，不扰动布局。