video标签不能直接包含div，必须用div容器包裹；正确做法是用div包住video并用flex布局居中，或旧浏览器用text-align+inline-block方案。
video 标签不能直接套 div，必须用容器包裹
HTML 规范里 <video></video> 是内联级替换元素，不接受块级子元素；如果写成 <video><div>...</div></video>，浏览器会自动“修复”结构——把 <div> 提到 <code><video></video> 外面，导致样式错乱或脚本失效。
正确做法永远是：用 <div> 包住 <code><video></video>，再对这个外层 <div> 做居中控制。
<h3>flex 布局居中 video 最稳（现代项目首选）</h3>
<p>给外层容器设 <code>display: flex，配合 justify-content 和 align-items 即可同时水平+垂直居中，且不依赖 video 尺寸是否固定。
<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>
- 若父容器没高度（比如
默认高度不够），height: 100vh能确保铺满视口 -
align-items: center对 video 生效，是因为它被当作 flex 项目处理，不是靠 line-height 或 vertical-align - 避免在
<video></video>上加margin: auto—— 它在非 flex/absolute 场景下无效
video 居中时宽高设置的三个关键点
居中效果常被宽高属性破坏，尤其当只设 width 没设 height，或用了 max-width 却忽略 aspect-ratio。
立即学习“前端免费学习笔记（深入）”；
-
width和height同时指定会强制拉伸，破坏画面比例；建议只设一个（如width: 100%），再用height: auto - 想响应式保持比例，优先用
aspect-ratio: 16 / 9（现代浏览器支持），比 JS 计算或 padding-top hack 更可靠 - 如果用
max-width: 100%，外层容器必须有明确宽度上下文，否则无效；常见坑是父<div> 没设 <code>width或inline行为未重置老浏览器兼容方案：text-align + inline-block
IE10 及更早版本不支持 flex，可用传统方式：让外层
<div> 设 <code>text-align: center，再把<video></video>设为display: inline-block。<div style="text-align: center;"> <video controls style="display: inline-block;" width="640" height="360"> <source src="demo.mp4" type="video/mp4"> </video> </div>- 必须加
display: inline-block，否则<video></video>默认是 inline，但某些旧版 IE 对其text-align响应不一致 - 垂直居中需额外处理（比如设父容器
line-height等于容器高度），但仅限单行内容；复杂布局仍推荐降级到绝对定位 - 注意
<video></video>的默认vertical-align是baseline，可能和文字基线对齐出空隙，建议显式设vertical-align: middle
真正容易被忽略的是：video 加载失败时的 fallback 内容位置。如果在
<video></video>内写文本或<div>，它不会消失，但也不会参与居中逻辑——因为那些内容只在播放失败时显示，且被浏览器当作普通内联文本渲染。需要居中 fallback，得在外层容器里单独控制。</div> - 必须加
