Flexbox全屏居中需父容器设display: flex和height: 100vh，用align-items与justify-content控制交叉轴和主轴对齐，比margin: auto或绝对定位更可靠且适配动态内容。
Flexbox全屏居中容器为什么用align-items和justify-content
因为它们直接控制交叉轴和主轴的对齐，比margin: auto或绝对定位更可靠，且天然支持动态内容尺寸变化。注意：父容器必须设height: 100vh或明确高度，否则子元素无法“全屏”居中。
常见错误是只写display: flex却忘了给父级加高度，结果动画容器卡在顶部；或者误用text-align: center——它只对行内元素有效，对div这类块级动画容器完全没用。
- 父容器需同时设置
display: flex、height: 100vh（或min-height: 100vh） - 子容器无需设宽高，但建议加
flex-shrink: 0防止被压缩 - 避免在父容器上同时用
position: absolute——会破坏Flex布局流
响应式加载动画怎么适配不同屏幕尺寸
关键不是重写动画逻辑，而是控制容器尺寸和动画缩放比例。用vw/vh单位定义动画组件大小，再配合transform: scale()做无损缩放，比媒体查询写多套@keyframes更轻量。
容易踩的坑是直接用width: 200px固定尺寸，导致小屏上溢出或大屏上过小；或者用%单位但没限制父容器最大宽度，动画在超宽屏上被拉得变形。
立即学习“前端免费学习笔记（深入）”；
- 推荐动画容器用
width: 20vw、height: 20vw，保持正方形比例 - 图标类动画可用
font-size: 5vmin，自动取vw和vh中较小值 - 若需精细控制，用
@media (max-width: 768px)微调transform: scale(0.8)，而非重写整个动画
animation和transition在加载动画里怎么选
animation适合循环播放的加载指示器（如旋转、脉冲），transition只适合状态切换（比如从“隐藏”到“显示”的淡入）。混用时要注意：如果用transition控制显隐，又用animation控制内部旋转，得确保transition不意外影响transform属性，否则旋转会卡顿。
典型错误是给整个加载容器加transition: all 0.3s，结果旋转动画被强制插值，出现非预期的中间态抖动。
- 旋转类动画统一用
animation: spin 1s linear infinite，别拆成transition - 显隐控制用
opacity+visibility组合，配合transition: opacity 0.2s - 避免在动画元素上设
transition-property: all，精确指定需要过渡的属性
为什么place-items: center不能替代align-items+justify-content
它可以替代，但兼容性差：place-items在 Safari 14.1 之前完全不支持，iOS 14.5以下也无效。而双属性写法（align-items: center; justify-content: center）所有现代浏览器都稳。
还有个隐蔽问题：某些CSS预处理器（如早期版本的Sass）会把place-items错误编译成无效声明，导致整个Flex规则失效，调试时很难发现。
- 线上项目优先写分开的
align-items和justify-content - 如果确定只跑新环境（如Electron 22+或内部管理后台），可简化为
place-items: center - 千万别混用——比如父容器写
place-items，子元素又写align-self，行为不可预测
真正难的不是让动画居中，而是让它在display: none切换、路由懒加载、服务端渲染（SSR）水合失败这些边界场景下依然稳定触发。这时候得靠requestAnimationFrame兜底或监听load事件，而不是只靠CSS。
