必须用 display: grid + place-items: center 实现文字与视频共享网格区域并统一居中，同时为文字层设置 max-width（如 80ch）以保障自动换行和响应式适配，再配合 clamp() 动态字体与无单位行高确保跨设备可读性。
全屏背景视频上的文字要真正居中，必须同时解决两个问题：一是文字在视口内水平+垂直居中，二是文字能自动换行、不溢出、响应式适配——只靠 text-align: center 或 margin: 0 auto 不行，它们管不了垂直方向，也压不住长文本横向撑开。
用 display: grid + place-items: center 套住整个容器
这是目前最干净的解法，不依赖文字尺寸，也不需要手动算偏移。关键不是给文字加样式，而是让文字和视频共享同一网格区域，并由父容器统一居中。
- 父容器（比如
<body>或外层<div class="hero">）必须设display: grid和place-items: center - 该容器高度必须是
min-height: 100vh（不能只写height: 100vh，否则内容少时会截断） -
html和body要清除默认 margin：html, body { margin: 0; height: 100%; } - 视频和文字都设
grid-area: video（或任意同名区域），让它们叠在同一格里
这样文字天然继承网格对齐逻辑，换行、缩放、多行都自动居中，无需额外 width 或 transform。
文字层必须设 max-width 才能换行
即使用了 grid 居中，如果文字层没宽度限制，浏览器仍会把它当无限宽的内联内容处理，white-space: normal 失效，导致一行堆到底。
立即学习“前端免费学习笔记（深入）”；
- 给文字容器（如
<div class="overlay">）加max-width: 90vw或width: fit-content（后者需配合margin: 0 auto） - 避免用
width: 100%——它会让文字层撑满网格区域，失去换行控制权 - 配合
text-align: center确保段内文字居中，但注意：这仅影响段内对齐，不是容器居中
示例关键 CSS：
.overlay {
max-width: 80ch; /* 比 vw 更语义化，适合文字 */
text-align: center;
}别用 position: absolute + transform 叠文字
这个老办法在全屏视频背景上容易翻车：视频本身常设 position: fixed，而 absolute 文字若父容器没设 position: relative，就会相对视口定位，结果文字飘到左上角或错位。
- 漏掉
transform: translate(-50%, -50%)→ 文字左上角钉在视口中心 - 写了
translate(-50px, -50px)（单位错）→ 偏移量固定，缩放后失准 - 没限制文字宽度 → 长句直接撑破 viewport，右侧被裁切
- 视频设了
object-fit: cover后，实际渲染尺寸和原始比例不一致，top: 50%参照的是容器，不是画面内容中心
除非你明确要支持 IE11 且无法改架构，否则没必要在这里硬套绝对定位。
字体大小和行高要配合视口动态调整
全屏背景视频下，文字尺寸不能写死 px，否则小屏上看不见，大屏上太小。但也不能全靠 rem 或 em——它们依赖根字号，不一定随视口线性变化。
- 优先用
clamp()：例如font-size: clamp(1.25rem, 4.5vw, 3.5rem) - 行高建议用无单位值（如
line-height: 1.4），避免和 font-size 单位冲突 - 如果用
flex替代grid，注意align-items: center对多行文字有效，但justify-content: center在主轴为 column 时才管垂直；别忘了设flex-direction: column
真正麻烦的从来不是“怎么居中”，而是“居中之后，文字在不同设备上是否还清晰可读、是否被视频黑边裁掉、是否和按钮/图标视觉平衡”。这些细节得靠真机调试，而不是只看桌面 Chrome。
