用 position: fixed + top: 50% + transform: translateY(-50%) 实现按钮紧贴右侧且视口内垂直居中，right 使用 env(safe-area-inset-right) 适配 iOS 安全区，避免修改 body 的 display 导致全局布局崩坏。
右侧返回顶部按钮的居中，不是让按钮在整页水平居中，而是让它**紧贴右侧、垂直居中于视口（或滚动容器）**，同时不随页面滚动“乱跑”。关键在于定位方式和参照系的选择，而不是套用 margin: 0 auto 或 text-align: center 这类水平居中逻辑。
用 position: fixed + transform 实现视口内垂直居中
这是最常用也最可控的做法：按钮脱离文档流，固定在视口右侧，再靠 transform 精确拉回自身一半尺寸，避免依赖具体宽高。
- 给按钮设
position: fixed，配合right: 20px（留出安全边距）和top: 50% - 必须加
transform: translateY(-50%)——它把按钮向上挪动自身高度的一半，实现垂直居中 - 不需要知道按钮具体高度，
transform是基于渲染后尺寸计算的，响应式友好 - 注意：别漏掉
top: 50%，只写transform没用；也别写bottom: 50%，那会锚定到底部
为什么不能用 flex 布局直接套在 body 上？
有人试过给 加 display: flex 再用 justify-content: flex-end 和 align-items: center，结果整个页面布局崩了——因为 body 变成 Flex 容器后，所有直系子元素（包括 header、main、footer）都会变成 Flex 项目，float、vertical-align、甚至部分 margin 行为全部失效。
- Flex 居中适合「局部容器」，比如一个
<div class="sidebar"> 里放按钮，而不是全局 <code>body - 如果硬要用，得包一层独立容器（如
<div id="fixed-controls">），再给它 <code>position: fixed+display: flex，但多一层 DOM 和样式，没必要 - 另外，
align-items: center在fixed容器里仍需容器有明确高度（如height: 100vh），否则没效果 - 用
right: env(safe-area-inset-right)替代固定像素值，自动避开右安全区 - 如果页面支持横向滚动，
position: fixed的按钮会固定在视口右，而非内容右——这反而是期望行为；但如果要始终贴着内容最右，得改用position: sticky+right: 0，但兼容性和垂直居中控制更复杂 - 缩放页面时，
transform: translateY(-50%)依然准确；而用margin-top: -20px这类固定值就会偏移
适配 iOS 安全区和横向滚动的细节
在 iPhone 等设备上，底部有安全区（Home Indicator），且用户可能横向滚动长表格，此时 right: 20px 可能被截断或错位。
立即学习“前端免费学习笔记（深入）”；
真正容易被忽略的是「参照系」：你写的 top: 50% 是相对于谁？是视口（fixed）、父容器（absolute）、还是滚动容器（sticky）？选错参照系，按钮就飘到不可见的地方去了。先确认定位上下文，再动手写样式。
