Flexbox垂直居中只需父容器设display: flex并配合align-items: center，高度明确时最直接；若需兼容IE10–11，应使用Autoprefixer自动添加前缀。
flexbox 垂直居中：父容器设 display: flex 就够了
只要父元素高度明确（比如设置了 height 或撑满视口），用 display: flex 配合 align-items: center 是最直接的方式。注意 justify-content: center 控制的是水平方向，别漏加——否则只垂直居中、水平可能靠左。
- 子元素无需设置高度，也不需要知道自身尺寸
- 如果父容器是全屏，推荐用
min-height: 100vh而非height: 100vh，避免内容超长时被截断 - 多个子元素会一起居中；若只想居中某一个，把它单独包一层
div更稳妥
position + transform：适合老项目或动态高度场景
当无法修改父容器 display 类型（比如它已是 position: relative 且已有其他定位逻辑），用绝对定位 + transform: translate(-50%, -50%) 依然可靠。关键点在于：必须同时设置 top: 50% 和 left: 50%，再用 transform 回拉自身宽高的一半。
- 子元素需有
position: absolute，父容器要有position: relative（或absolute/fixed）来形成定位上下文 -
transform比margin-top: -XXpx安全——后者要求你提前知道子元素高度，响应式下极易出错 - 如果子元素是图片或文字，注意
white-space: nowrap或max-width可能影响居中视觉效果
为什么不用 vertical-align: middle？
vertical-align 只对 inline、inline-block 元素以及表格单元格（td）生效，对块级元素（如 div 默认）完全无效。常见误用是给一个 div 直接设 vertical-align: middle，结果毫无反应。
- 想用它，得先让元素变成
inline-block，再配合伪元素或空格“占位”模拟行内基线，复杂且不可靠 - 在 Flex 或 Grid 成为主流后，
vertical-align已基本退居为处理图文混排或表格内部对齐的专用工具
兼容性提醒：IE10+ 的 flexbox 要加前缀吗？
现代项目基本不用考虑 IE9 及以下，但若需支持 IE10–11，flex 属性仍需补全旧语法：display: -ms-flexbox、-ms-flex-align: center 等。不过更实际的做法是——用 Autoprefixer 自动注入，别手写。
立即学习“前端免费学习笔记（深入）”；
- PostCSS + Autoprefixer 配置中，设
browsers: ["ie >= 10"]即可覆盖 - 手动加前缀容易遗漏，比如
flex-direction在 IE10 中对应-ms-flex-direction，而align-items对应-ms-flex-align，命名不一致 - 真正麻烦的不是 flex，而是
gap或flex-wrap: wrap-reverse这类新特性，它们在 IE 中根本无替代方案
position + transform 反而更可控。别为了“用新技术”硬套 flex，也别因一句“IE 不支持”就放弃——先看真实用户占比，再决定要不要加前缀或降级。 
