fixed按钮垂直居中失效是因未同时设置top:50%和transform:translateY(-50%)；左右按钮需设left/right间距防重叠；异步加载图标时应预设容器高度或重绘transform；移动端抖动可加translateZ(0)开启硬件加速。
fixed定位时按钮垂直居中不生效？
用 position: fixed 把分享按钮贴边后，发现 top: 50% + transform: translateY(-50%) 没反应，或者按钮飘在顶部/底部——大概率是没给父容器设 height，但这里根本不需要父容器；fixed 元素的定位参考系是视口，直接靠自身调整就行。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须同时设置
top: 50%和transform: translateY(-50%)，只写一个会偏移一倍高度 - 避免用
margin-top: -XXpx，按钮高度可能动态变化（比如文字换行、图标尺寸不同） - 如果按钮组内部有多个元素且高度不一致，把
transform加在最外层容器上，别加在单个按钮上
左右两侧都放按钮组，怎么避免互相覆盖？
左右各一个 fixed 容器时，如果都用 left: 0 / right: 0，再叠加上 top: 50%，它们会挤在同一垂直位置，鼠标悬停或点击容易误触。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 左侧用
left: 16px（不是0），右侧用right: 16px，留出安全间距 - 不要依赖“刚好贴边”，移动端小屏下
16px比0更可靠，也防系统手势条遮挡 - 若需响应式适配，用
min-width控制按钮组最小宽度，而不是靠left/right动态计算
按钮组内容动态加载时，fixed定位错位怎么办？
比如分享按钮图标通过 JS 异步加载（SVG Sprite、iconfont 或图片），初始渲染时按钮高度为 0，transform: translateY(-50%) 就按 0 计算，等图标加载完就突然下掉一段。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给按钮容器预设
min-height或height（例如height: 48px），确保初始布局稳定 - 图标加载完成后再触发一次
transform重绘（简单做法：element.style.transform = 'translateY(-50%)'） - 更稳妥的是用
aspect-ratio配合padding-top占位，但注意 Safari 旧版本不支持aspect-ratio
移动端滚动时按钮抖动或卡顿？
尤其 iOS Safari 下，fixed 元素在页面滚动时出现闪烁、跳动甚至短暂消失，本质是浏览器对 fixed 的合成层处理不稳定。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 强制开启硬件加速：加
transform: translateZ(0)或will-change: transform到按钮容器 - 避免在
fixed元素内使用box-shadow或半透明背景，这些会触发频繁重绘 - 如果按钮里有动画（如 hover 缩放），用
transform和opacity，别碰width/height/top
真正麻烦的是按钮要跟随页面滚动做视差偏移，或者需要监听滚动状态来显隐——那已经超出 fixed 能干净解决的范围了。
