最稳方案是给<body>或外层容器设display: flex; justify-content: center; align-items: center; height: 100vh，并确保<video>不脱离文档流、不设绝对定位，配合object-fit: cover和playsinline以适配iOS Safari。
用 Flexbox 让 <video> 在页面正中间最稳
直接给 <body> 或外层容器加 display: flex + 两个居中属性，是目前兼容性好、代码少、不依赖宽高的首选方案。它天然无视 <video> 是否设置了 width 或 height，也不怕父容器没设高度。
实操建议：
- 确保父容器（比如
<body>或一个全屏<div>）设置了height: 100vh，否则 flex 的垂直居中可能失效 - 加上
justify-content: center（水平）和align-items: center（垂直），二者缺一不可 - 如果视频本身过大，记得加
max-width: 100%; max-height: 100vh;防止溢出 - 避免给
<video>设固定margin或用position: absolute配top/left，容易在不同屏幕下偏移
为什么不用 margin: auto 配 position: absolute
这种写法看似经典，但对 <video> 很容易翻车：它默认是替换元素（replaced element），margin: auto 在绝对定位下只对块级非替换元素可靠；而且必须显式设置 width 和 height，否则 top: 50%; left: 50%; transform: translate(-50%, -50%) 会因尺寸未定而抖动或错位。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 视频在 Chrome 里居中，但在 Safari 里偏上——因为 Safari 对未设尺寸的
<video>的getBoundingClientRect()行为略有差异 - 加载过程中位置跳动，尤其是带 poster 图的视频，初始尺寸和播放后尺寸不一致
- 响应式缩放时，
transform没同步更新，导致“看起来居中，实际偏了几个像素”
<video> 宽高比变化时，居中还成立吗
成立，但需要额外控制缩放行为。Flexbox 居中本身不干预宽高比，但视频默认会保持原始宽高比（object-fit: contain），这可能导致上下/左右留白。如果你希望填满又不失真，得显式设 object-fit: cover；如果想拉伸变形填满，则用 object-fit: fill。
关键参数差异：
-
object-fit: contain→ 居中且完整显示，可能有黑边（默认行为） -
object-fit: cover→ 居中并裁剪，无黑边，推荐用于背景类视频 -
object-fit: fill→ 拉伸填充，可能变形，慎用 - 别漏掉
object-position: center，它配合cover确保裁剪区域始终以画面中心为准
移动端 Safari 下 <video> 居中失效的典型原因
不是 Flexbox 不工作，而是 iOS Safari 对 <video> 的渲染有特殊限制：当视频未设置 playsinline 且处于非全屏状态时，它可能被强制“提升”到独立图层，脱离正常文档流，导致 flex 容器无法准确测量其尺寸。
必须检查的点：
- 加
playsinline属性（<video playsinline>），否则 iOS 可能唤起原生全屏播放器 - 避免同时设
webkit-playsinline和playsinline——后者已覆盖前者，重复反而引发兼容问题 - 如果用了
video { width: 100vw; height: 100vh; }，需补min-width: 100vw; min-height: 100vh;，防止 Safari 因 viewport 缩放计算偏差导致尺寸塌陷
