Flex实现Banner标题垂直居中需三要素：容器有明确高度（如height: 400px或min-height: 100vh），同时设置align-items: center和justify-content: center，并重置标题默认margin与line-height；IE11需加-ms-flexbox兼容；Safari下vh抖动需用JS监听resize或避免纯vh。
Flex实现Banner标题垂直居中为什么总失败
因为只写 display: flex 不够，缺了关键两步：容器必须有明确高度，且要同时设置 align-items: center 和 justify-content: center。常见错误是只设了其中一个，或者父容器高度塌陷成0。
- 容器（如
.banner）需设定固定高度（height: 400px）或最小高度（min-height: 100vh），否则 Flex 无参照物可居中 -
align-items: center控制交叉轴（垂直方向）居中；justify-content: center控制主轴（默认水平）居中——标题要真正在正中，两个都得写 - 如果 Banner 内容是响应式图片背景，记得给容器加
background-size: cover，否则高度可能被内容撑开，破坏居中效果
用Flex居中时文字被截断或偏移
本质是子元素（标题）的 margin、padding 或 line-height 干扰了 Flex 的计算逻辑，尤其当标题用了 h1 默认外边距或设置了过大的行高。
- 重置标题默认样式：
h1 { margin: 0; line-height: 1; }，避免浏览器默认margin-top/bottom拉偏位置 - 不要在标题上设
height或padding-top，这会让 Flex 认为“内容区域变高”，实际视觉中心就会上移 - 若标题多行，用
text-align: center配合white-space: normal，别依赖line-height模拟居中——它只对单行有效，且会放大字体渲染误差
IE11兼容性下Flex垂直居中失效
IE11 对 flex 的支持不完整，特别是 align-items: center 在某些嵌套场景下会失效，且不支持 min-height 在 Flex 容器上的正确解析。
- 给容器加
display: -ms-flexbox和对应旧版属性：-ms-flex-align: center、-ms-flex-pack: center - 避免用
min-height: 100vh，IE11 下常识别为0；改用固定高度或 JS 动态设高 - 如果必须兼容 IE11 且 Banner 高度不固定，建议退回到绝对定位方案：
position: absolute; top: 50%; transform: translateY(-50%)，并确保父容器position: relative
移动端Banner标题在Safari里上下抖动
这是 Safari 对 vh 单位的特殊处理导致的：地址栏收放会动态改变视口高度，100vh 值跳变，Flex 容器高度重算，引发标题位置闪动。
立即学习“前端免费学习笔记（深入）”；
- 禁用
height: 100vh，改用min-height: 100vh+height: 100%组合，但更稳妥的是用 JS 监听resize并重设容器高度 - 添加
body { margin: 0; }和html { height: 100% }，防止 Safari 因 body 默认 margin 导致高度计算偏差 - 若 Banner 含视频或 canvas，它们在 Safari 中可能触发异步渲染，延迟触发 Flex 居中；可在
onload或requestAnimationFrame里补一次align-items设置
align-items 看，先 inspect 元素盒模型，确认容器高度和子元素边界线在哪。 
