video用object-fit: cover不居中是因为默认object-position为0 0，需显式设置object-position: center center才真正控制内容居中；单独写object-fit无效，且需确保父容器无overflow: hidden截断。
video元素用object-fit: cover不居中？先检查object-position
单独写object-fit: cover只会等比缩放并填满容器，裁剪起点默认是左上角（object-position: 0 0），不是视觉中心。必须显式加object-position: center center，它才真正控制“哪一部分被保留”。这个属性只有和object-fit同时存在时才生效，单独声明会被忽略。
- 错误写法：
object-fit: cover→ 人脸常被切掉 - 正确写法：
object-fit: cover; object-position: center center - 如果想突出上半身，可改用
object-position: top center，但需实测视频关键帧位置
为什么position: absolute四边为0比transform: translate(-50%, -50%)更可靠
transform依赖元素自身尺寸计算偏移，而视频在加载中、横竖屏切换、或width/height未设时，尺寸可能为0或不稳定，导致定位漂移。用top: 0; right: 0; bottom: 0; left: 0把video钉死在父容器边界内，再由object-fit在其内部做内容缩放，逻辑解耦、响应性更强。
- 父容器必须设
position: relative或position: fixed，否则absolute会相对于视口定位 - 若父容器有
padding或border，inset: 0比四边分别写更简洁（inset是top/right/bottom/left的简写） - 避免给
video设width: 100%; height: 100%，它会干扰object-fit的自然行为
全屏视频背景要不要用position: fixed
用fixed会让视频始终固定在视口，不随页面滚动——适合首屏沉浸式场景；但若页面有长内容，用户滚动后视频会消失，下方内容失去背景支撑。多数情况推荐position: absolute + 父容器height: 100vh，既保证首屏满屏，又允许后续内容正常流式布局。
- 用
fixed时，务必加z-index: -1，防止遮挡其他元素 - 移动端Safari对
fixed视频支持不稳定，常触发自动暂停或全屏控件，absolute兼容性更好 - 若坚持用
fixed，需监听scroll事件手动控制播放状态，否则容易卡顿
背景视频和文字层叠加时，常见错位原因
错位往往不是video没居中，而是文字容器用了max-width + margin: 0 auto，而视频父容器没同步约束宽度。当屏幕超宽（如4K显示器），文字区停在1260px，视频却撑满整个视口，视觉上就“偏右”了。
- 解决方案：让文字容器和视频父容器共享同一套
padding逻辑，例如都用padding-left: calc(50vw - 630px); padding-right: calc(50vw - 630px) - 或者把视频和文字都包进同一个
position: relative容器，再用grid或flex统一控制子项对齐 - 禁用
video的controls属性，避免控件在不同分辨率下尺寸不一致，干扰定位判断
实际最易被忽略的是object-position的生效前提——它必须和object-fit成对出现，且不能被父级overflow: hidden意外截断。调试时先临时加border: 1px solid red到video，确认其盒模型确实铺满父容器，再调内容定位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
