全屏启动页flex居中需同时设align-items:center和justify-content:center，且html/body必须height:100%，容器推荐min-height:100vh；ios safari下vh动态变化需用clientheight监听或height:100%替代。
flex布局实现全屏启动页居中，align-items和justify-content必须同时设为center
单靠display: flex不生效，漏掉任一属性都会只居中一个方向。常见错误是只写justify-content: center，结果元素水平居中但顶部贴边。
-
html和body高度必须为100%，否则flex容器没高度，子元素无法垂直居中 - 启动页容器推荐用
min-height: 100vh而非height: 100vh，避免内容超长时被截断 - 如果启动页含
position: fixed元素（比如加载动画），它会脱离flex流，需单独处理定位
全屏启动页中，vh单位和flex混用要注意iOS Safari的视口缩放问题
iOS Safari在地址栏收起/展开时会动态改变vh值，导致居中偏移。这不是flex的问题，而是视口单位本身缺陷。
- 临时方案：用
height: 100%+flex替代100vh，前提是父级html/body已设height: 100% - 更稳方案：监听
resize事件，用document.documentElement.clientHeight重设容器高度 - 不要用
vh做字体大小（如font-size: 4vh），iOS下缩放后文字可能糊或错位
启动页加载过程中，flex居中内容闪动，本质是css渲染时机问题
dom就绪但样式未完全应用时，元素会先按默认流式布局渲染一次，再重排为flex居中——这就是“闪动”来源。
- 给启动页容器加
opacity: 0，等DOMContentLoaded后再用js加fade-in类，视觉上更干净 - 避免在
link外联样式表加载完成前就渲染内容；可加media="print"占位，JS加载完再改media="all" - 慎用
transition: all，尤其包含transform和opacity时，低端安卓机易掉帧
需要兼容IE11？别用flex居中启动页
IE11对flex支持有严重bug：比如min-height: 100vh在flex容器里失效，或justify-content在某些嵌套层级下完全不生效。
立即学习“前端免费学习笔记（深入）”；
- 真要兼容IE11，改用
position: absolute+transform: translate(-50%, -50%)，配合top: 50%/left: 50% - 若项目已用现代CSS，建议直接放弃IE11支持——2024年多数启动页场景已无必要
- 检查
caniuse数据：flexbox在IE11中缺失flex-wrap、flex-grow等关键特性，仅基础居中勉强可用，但不可靠
实际写的时候最容易忽略的是html和body的高度继承链，以及iOS下vh的动态性——这两点不提前压住，上线后第一台iphone测试就会出问题。