用 position: fixed 居中时动画偏移，是因为仅设 top: 50%; left: 50% 会使元素左上角对齐视口中心，必须配合 transform: translate(-50%, -50%) 实现真正居中；动画应优先使用 transform 和 opacity 避免重排，旧浏览器需降级为 margin: auto 或 Flex 布局，显隐控制需结合最小展示时间与平滑过渡。
用
居中时，为什么动画总偏移？
因为
是相对于视口定位，但很多人直接写
，结果元素左上角落在中心，而不是自身居中——这是最常踩的坑。
必须配合
把自身回拉一半宽高
不加
或只加一个方向，都会导致错位
如果动画元素宽高不固定（比如内容动态），优先设
/
或用
/
防止抖动
CSS 加载动画本身要不要用
？
要，但关键不是“有没有”，而是“怎么写才不卡”。浏览器对
和
的动画优化最好，其他属性（如
、
）容易触发重排或低帧率。
旋转动画优先用
，别用
然后在
里写
避免在
中修改
/
，这会让浏览器放弃合成层优化
简单旋转 + 透明度脉冲就够用：比如
IE11 或旧版 Safari 下
居中失效怎么办？
旧浏览器对
的
支持不一致，特别是 IE11 对
在
元素上渲染异常。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
降级方案：改用
，但要求元素有明确宽高
更稳的写法是加前缀：
如果项目还需兼容 IE，建议直接用 Flex 布局容器包裹，把加载动画放进一个
的全屏遮罩层里，再用
加载动画显示/隐藏的切换逻辑该放哪？
别只靠 CSS 类控制显隐，JS 控制时机更重要。常见错误是请求一发就立刻 show，结果接口飞快返回，动画一闪而过；或者 hide 太早，接口还没真正完成。
立即学习
“
前端免费学习笔记（深入）
”；
show 动画：应在发起请求前或请求 pending 状态确认后立即添加类，比如
hide 动画：必须等响应成功/失败回调里执行，且建议加个最小展示时间（如 300ms），避免“闪一下就没了”
避免用
切换，改用
+
配合 transition，让隐藏过程平滑
居中本身不难，难的是在各种设备、各种加载节奏、各种浏览器下都稳得住——尤其是 transform 回拉那一步，漏掉就等于白写。
position: fixedfixedtop: 50%; left: 50%transform: translate(-50%, -50%)transformwidthheightmin-widthmin-height@keyframestransformopacitywidthbackground-positiontransform: rotate()animation: spin 1s infinite linear@keyframestransform: rotate(360deg)@keyframestopleft@keyframes loading { 0% { transform: rotate(0); opacity: 0.6; } 100% { transform: rotate(360deg); opacity: 1; } }fixedtransformtranslatetransform: translate(-50%, -50%)fixedtop: 0; bottom: 0; left: 0; right: 0; margin: auto;-webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);position: fixeddisplay: flex; align-items: center; justify-content: centerloadingEl.classList.add('show')display: nonevisibility: hiddenopacity: 0