vertical-align在Flex布局中无效，因其仅对inline元素和table-cell生效，而Flex子元素是flex item；居中应使用align-items和justify-content，并确保父容器有明确交叉轴高度。
flex布局里vertical-align为什么无效
因为 vertical-align 只对 inline 元素和 table-cell 生效，Flex 容器里的子元素默认是 flex item，vertical-align 直接被忽略——这不是 bug，是规范行为。
常见错误现象：给子元素写 vertical-align: middle，页面毫无反应；或者误以为加了 display: flex 就自动继承了传统行内对齐逻辑。
- Flex 居中靠的是容器的
align-items和justify-content，不是子元素样式 - 如果父容器高度未知（比如内容撑开、响应式高度），必须确保父容器有明确的“参考高度范围”，否则
align-items: center会失效（它居中的是“交叉轴”，但交叉轴长度为 0 时无处可居） - 移动端 Safari 对
min-height: 100vh渲染不稳定，建议用height: 100vh或配合min-height: 100%+ 父级设高
父容器高度未知时怎么设交叉轴参考
Flex 的 align-items: center 需要父容器在交叉轴（默认是垂直方向）上有可计算的高度。如果父容器高度由内容决定，又没设最小高度，浏览器无法确定“中间”在哪。
使用场景：登录弹窗、卡片式列表项、全屏轮播页中的标题+按钮组合——内容不定长，但视觉上必须垂直居中。
立即学习“前端免费学习笔记（深入）”；
- 最稳妥：给父容器加
min-height: 100vh（注意 iOS Safari 中100vh可能被地址栏压缩，可改用100dvh） - 更兼容：用
height: 100%+ 确保所有祖先元素（包括html,body）都设了height: 100% - 避免踩坑：不要只给父容器设
display: flex就以为万事大吉，漏掉高度约束 = 实际没居中
单个子元素 vs 多个子元素的写法差异
Flex 垂直居中本身不区分子元素数量，但实际布局中，多个子元素可能相互挤压，导致“看起来没居中”。关键在是否需要整体居中，还是每个子元素各自居中。
示例：一个带图标和文字的按钮，或一个含标题、描述、操作按钮的卡片。
- 仅一个子元素：直接用
align-items: center+justify-content: center即可 - 多个子元素需整体居中：保持
align-items: center，但别加justify-content: center（否则水平也居中，可能破坏排版） - 多个子元素需等间距分布：用
align-content: center（仅对多行 flex 容器有效），单行请用margin或gap - 注意
align-content和align-items不同：前者管多行，后者管单行内所有 item 在交叉轴上的对齐
IE11 下 flex 垂直居中失效怎么办
IE11 对 Flex 的实现有严重偏差，尤其 align-items: center 在某些嵌套结构下完全不生效，且不报错。
性能影响不大，但兼容性代价高——如果项目还必须支持 IE11，不能只依赖 Flex。
- 降级方案：对 IE11 单独用
display: table-cell+vertical-align: middle，配合display: table父容器 - 别用
flex: 1或min-height: 100vh在 IE11，它们解析异常；改用固定值或 JS 补偿 - 检测方式：在 IE11 控制台打
getComputedStyle($0).alignItems，常返回"stretch"即使写了"center" - 现代项目若已放弃 IE11，就别加 hack，
align-items: center加min-height: 100vh就够干净
