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，结果毫无反应。
