ie11中align-items: center垂直偏移的根源是其对min-height与align-items组合解析偏差，需显式设置height（如height: 100vh）才能触发居中逻辑，仅min-height不可靠；兼容方案包括flex-direction: column+justify-content: center或单子项用margin: auto。
IE11中align-items: center垂直偏移的根源
不是Flex写法错了，是IE11对min-height和align-items的组合解析有偏差：当父容器仅设min-height: 100vh（没设height），IE11可能将交叉轴高度算作0或未触发居中逻辑，导致子元素实际贴顶。这不是渲染延迟，而是计算阶段就失效。
IE11必须显式声明height才能触发align-items
IE11要求父容器在计算对齐前“确认”自身高度存在，仅靠min-height不够稳定。实操中需同时设置height与min-height，且height不能为auto：
-
height: 100vh+min-height: 100vh（最稳妥，覆盖视口且防内容超长截断） - 若需兼容IE10，加
-ms-flex-align: center（注意不是align-items） - 避免用
height: 100%——IE11对百分比高度链断裂极其敏感，哪怕html和body都设了height: 100%，仍可能回退到auto
flex-direction: column是IE11里更可靠的替代路径
当flex-direction: row + align-items: center在IE11中持续偏移，可切换主轴方向，把垂直对齐交给justify-content（它在IE11中支持更一致）：
- 父容器设
display: flex+flex-direction: column - 用
justify-content: center控制子元素上下位置（此时主轴是垂直的） - 保留
align-items: center处理水平对齐（此时交叉轴是水平的） - 必须配
height: 100vh，min-height单独仍不可靠
margin: auto在IE11中比align-items更稳
如果父容器只有一个直接子元素，给该子元素设margin: auto，IE11会正确将其推到两个轴中心——它不依赖父容器的交叉轴计算，绕过了align-items的bug：
- 仅适用于单子项场景，多个子项时会全部被
margin: auto撑开 - 子元素不能是
position: absolute，否则脱离文档流失效 - 无需改动父容器的
height写法，min-height: 100vh即可生效
真正麻烦的不是写法本身，而是IE11对“高度存在性”的判定比现代浏览器苛刻得多——它需要明确的height值来启动对齐引擎，min-height只是保底，不是起点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
