绝对定位 + transform 是最常用且兼容性稳妥的多行文字垂直居中方案，通过 left: 50%、top: 50% 定位中心点，再用 transform: translate(-50%, -50%) 反向偏移自身尺寸实现精准居中。
用 position: absolute + transform 实现精准垂直居中
纯靠 vertical-align 或 line-height 在背景图上垂直居中文本基本不可靠——它们只对行内元素或表格单元格有效，而背景图容器通常是块级元素。最稳的方案是把文字层绝对定位，再用 transform: translateY(-50%) 拉回一半自身高度。
- 父容器必须设
position: relative，否则absolute会相对于整个页面定位 - 文字元素加
top: 50%，再加transform: translateY(-50%)，才能真正居中（仅靠top: 50%会让文字顶部在中间，不是整体居中） - 如果文字有多行，
transform依然生效，但需确保父容器高度足够，否则文字可能被截断
避免背景图被文字遮挡或拉伸的 CSS 组合写法
背景图和文字共存时，常见问题是图片被缩放变形、文字区域覆盖不全，或滚动时错位。关键在于分离「背景渲染逻辑」和「内容定位逻辑」。
- 用
background-image+background-size: cover控制图片铺满且不变形 - 务必设置
background-attachment: fixed（可选），防止滚动时文字和背景相对滑动；但注意 Safari 对该属性支持不稳定，若需兼容建议改用background-attachment: scroll - 文字容器不要设
height: 100%，而是让父容器有明确高度（比如min-height: 100vh），否则top: 50%无参照
响应式下文字垂直居中偏移的修复方法
在移动端或窗口缩放时，文字经常“看起来没居中”，其实是字体渲染差异或视口单位计算误差导致的。这不是 bug，而是 em、rem 或系统字体度量带来的微小偏差。
- 优先用
vh单位控制父容器最小高度（如min-height: 100vh），比%更可靠 - 如果文字仍偏上/偏下，微调
transform: translateY(-50%)为translateY(calc(-50% + 2px))，2px 是常见补偿值 - 避免在文字上设
margin-top居中——它会破坏居中逻辑，且不同字体行高差异大，不可预测
Flexbox 方案为什么在这里不推荐？
虽然 display: flex + align-items: center 看似更简洁，但它要求文字是父容器的直接子元素，且父容器需承担内容流布局职责。一旦背景图容器还承载其他区块（比如导航栏、按钮组），flex 就容易干扰整体结构。
立即学习“前端免费学习笔记（深入）”；
- flex 容器中若混入多个子元素，
align-items会对所有子项生效，可能误动其它元素 - 背景图容器常需
overflow: hidden裁剪图片边缘，而 flex 容器在某些浏览器中与overflow组合时存在渲染 bug - 如果已用 grid 布局管理页面主结构，再嵌套一层 flex 容易增加维护成本，不如用定位+transform 更轻量可控
position: relative」——有时候你以为的父容器其实被某个祖先的 transform 或 perspective 变成了新的定位上下文，结果文字飞到屏幕外。遇到这种情况，打开 DevTools 逐层检查 computed position 和 transform 就能快速定位。 
