video 默认不居中因其是行内级替换元素，需用 flex 布局（父设 min-height、子设 max-width/aspect-ratio）或 block+margin:auto 方案；避免使用 position+transform。
video 标签默认不居中，是因为它是个行内级替换元素
直接写 不加任何样式时，它表现得像 width: 100%，也大概率不会水平居中——父容器没声明文本对齐，子元素就按左对齐走。
最稳妥的居中方案：flex 布局 + 明确 width/height
用 display: flex 是目前兼容性好、行为可预测的做法。关键点不是“只加 justify-content”，而是整套配合：
- 父容器必须有明确高度（比如
min-height: 100vh或固定值），否则align-items: center没参照 -
自身建议设max-width: 100%和height: auto，避免拉伸变形 - 如果视频宽高比固定（如 16:9），可加
aspect-ratio: 16 / 9配合object-fit: cover控制裁剪
.video-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #000;
}
video {
max-width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
}
用 margin: auto 居中要小心两个前提
很多人试过 margin: 0 auto 失败，是因为它只对「块级且宽度明确」的元素生效。对 必须先改显示类型：
- 加
display: block（否则仍是行内级，margin无效） - 加
width（哪怕只是width: 80%），不然auto水平方向无计算依据 - 注意：若父容器是
text-align: center，对display: block的 video 无效，别混用
video {
display: block;
width: 80%;
margin: 0 auto;
}
响应式居中时，避免用 position + transform 做“伪居中”
像 position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) 看似能居中，但隐患明显：
立即学习“前端免费学习笔记（深入）”；
- 脱离文档流，父容器高度塌陷，可能影响后续布局
- 在 Safari 旧版或某些移动端 WebView 中，
transform对渲染有闪烁或黑屏问题 - 无法响应父容器 resize（比如横竖屏切换），需额外监听
resize事件重算
除非你明确控制整个页面结构且兼容性要求极低，否则不推荐这条路。
真正难的不是让 video 居中，而是判断它是否该撑满容器、是否要保留原始宽高比、以及是否要适配全屏按钮触发后的重新居中逻辑——这些才是实际项目里容易漏掉的环节。
