HTML5视频居中首选Flex布局：父容器设display: flex、justify-content: center、align-items: center及明确高度；次选绝对定位+transform；margin: 0 auto需配合display: block和固定宽度才生效。
HTML5 视频默认是左对齐的行内元素，直接加 align="center" 或用 text-align: center 包裹它，只在父容器是块级且有明确宽度时才“看起来居中”——但实际可能因换行、默认 margin、或父容器未设宽而失效。真正可靠的做法是脱离文档流或利用现代布局控制。
用 Flex 布局让 <video></video> 在容器中完全居中
这是目前最推荐、兼容性足够（Chrome 29+、Firefox 20+、Safari 9+、Edge 12+）且写法简洁的方式。
- 给视频的**直接父容器**设置
display: flex、justify-content: center和align-items: center - 确保父容器有明确高度（比如
height: 100vh或固定像素），否则align-items: center不会垂直生效 - 视频本身无需设
width或height，但建议加max-width: 100%防止溢出
<div style="display: flex; justify-content: center; align-items: center; height: 100vh;">
<video controls width="640" height="360">
<source src="demo.mp4" type="video/mp4">
</video>
</div>
用绝对定位 + transform 居中（兼容老浏览器）
适用于需要支持 IE9–11 的场景，但需注意父容器必须设 position: relative，否则 absolute 会相对于 body 定位。
- 父容器设
position: relative，并最好有明确宽高（否则居中位置难控） - 视频设
position: absolute、top: 50%、left: 50%，再用transform: translate(-50%, -50%)回拉自身宽高的一半 - 别漏掉
transform，否则视频左上角会落在容器中心点
<div style="position: relative; width: 100%; height: 600px;">
<video controls width="640" height="360"
style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
<source src="demo.mp4" type="video/mp4">
</video>
</div>
为什么 margin: 0 auto 单独不生效？
<video></video> 默认是 display: inline（类似 <img alt="HTML5视频如何居中放_让视频在网页中间显示的方法【方法】" >），而 margin: 0 auto 只对**块级元素且有明确宽度**才起水平居中作用。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
<video style="margin: 0 auto;"></video>—— 不生效，因为没转成块级 - 正确写法之一：
<video style="display: block; margin: 0 auto; width: 640px;"></video> - 但此法仅水平居中，垂直方向仍需额外处理（如父容器
line-height或padding） - 若视频响应式（
width: 100%），则margin: 0 auto失效，因为宽度不固定
真正要注意的是：居中不是单靠一个 CSS 属性能搞定的，关键看「谁是参照物」和「视频的 display 类型」。Flex 是首选，但如果你的项目要兼容 IE8，就得退回到 table 布局或 JS 计算 offsetTop/offsetLeft —— 那种方案现在基本没人用了。
