ie11中align-items: center垂直居中失效，必须显式设置height（如height: 100vh）才能触发对齐计算，min-height无效；推荐用flex-direction: column + justify-content: center或单子项时用margin: auto。
IE11 下 align-items: center 垂直居中失效，不是写法错了，是它压根没算出“中间在哪”——必须显式声明 height 才能触发对齐逻辑，仅 min-height 不够。
IE11 要求 height 存在才能计算交叉轴中心
现代浏览器中 min-height: 100vh 就足以让 align-items: center 生效，但 IE11 把 min-height 当作“保底”，不视为“可参与对齐计算的高度”。它会在父容器高度未明确时，直接将交叉轴长度当作 0 处理，导致子元素贴顶。
- 必须同时设
height: 100vh和min-height: 100vh（后者防内容超长截断） - 避免用
height: 100%：IE11 对百分比高度链极其敏感，哪怕html和body都写了height: 100%，仍可能回退为auto - 若父容器是嵌套结构，上游所有祖先元素都需有明确高度（或至少
min-height），否则 IE11 计算中断
flex-direction: column + justify-content 是更稳的替代路径
当 flex-direction: row 配 align-items: center 在 IE11 中持续偏移，可切换主轴方向。IE11 对 justify-content 的支持比 align-items 更一致，尤其在 column 模式下。
- 改写为：
display: flex; flex-direction: column; justify-content: center; align-items: center; - 此时
justify-content控制垂直位置（主轴为垂直），align-items控制水平位置（交叉轴为水平） - 仍需配
height: 100vh，min-height单独无效
单子项场景优先用 margin: auto
如果父容器只有一个直接子元素，给该子元素设 margin: auto 是 IE11 中最可靠的居中方式——它不依赖父容器交叉轴计算，绕开了 align-items 的 bug。
- 适用条件：父容器
display: flex，且子元素是唯一直接子项 - 子元素不能是
position: absolute，否则脱离文档流失效 - 无需改动父容器
height写法，min-height: 100vh即可生效 - 多个子元素时慎用：所有子项都会被
margin: auto推开，造成意外间距
别碰 align-content，也别混用 vertical-align
align-content 在 IE11 中几乎不支持，它只在 flex-wrap: wrap 且存在多行时才起作用，单行 flex 容器里写它完全无效。而 vertical-align 对 flex item 本就不生效，IE11 下更不会有任何反应。
- 删掉所有
align-content: center—— 它不会帮你居中，只会增加维护成本 - 不要给子元素设
vertical-align: middle，无论是否加display: inline-block，IE11 都忽略 - 若子元素是
<img>，统一加display: block，避免 inline 渲染带来的 1–2px 偏移
真正麻烦的不是怎么写，而是 IE11 对“高度存在性”的判定比所有现代浏览器都苛刻——它需要一个明确的 height 值来启动对齐引擎，min-height 只是兜底，不是起点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
