video水平居中必须设display:block+明确宽度，因默认inline导致margin:0 auto无效；推荐video{display:block;margin:0 auto;max-width:100%;height:auto}。
video 标签水平居中必须设 display: block + width 或 max-width
直接写 <video controls></video> 默认是 inline 元素，margin: 0 auto 完全无效。很多人试了没反应，就是因为漏掉了两个前提：
-
display: block—— 强制转为块级，否则 margin 不起作用 - 明确的宽度控制 —— 不能只写
width: 100%（它占满父容器，margin: 0 auto就没空间可分），得用max-width: 100%配合固定值或百分比宽度
推荐写法：video { display: block; margin: 0 auto; max-width: 100%; height: auto; }。这样既响应式，又避免小屏溢出。
Flex 布局实现水平+垂直居中（现代首选）
要让视频在页面或容器里真正“居中”，不是只水平对齐，而是上下左右都居中——Flex 是目前最可靠、代码最少的方式。
关键点不是只加 justify-content: center，而是整套配合：
- 父容器必须设
display: flex，且有明确高度（比如min-height: 100vh或固定height: 600px），否则align-items: center没参照 - 视频本身建议保留
max-width: 100%和height: auto，防止拉伸 - 如果宽高比固定（如 16:9），可加
aspect-ratio: 16 / 9，再配object-fit: cover控制裁剪
示例：<div style="display: flex; justify-content: center; align-items: center; min-height: 100vh;"><video controls max-width="100%" height="auto"></video></div>
响应式容器里 video 怎么不被拉伸变形？
设 width: 100% 后，视频常在窄屏下压扁或撑出横向滚动条——这不是 bug，是没处理好宽高比和约束边界。
必须同时满足三个条件：
-
max-width: 100%—— 防止父容器本身超视口时视频越界（比如嵌套在宽卡片里） -
height: auto—— 保持原始比例，不硬设 height -
aspect-ratio: 16 / 9（或对应比例）—— 现代浏览器（Chrome 88+、Safari 15.4+）能自动维持容器比例，video填满即可
旧版 Safari 不支持 aspect-ratio，可用 fallback：给父容器设 padding-top: 56.25%（16:9 的百分比）+ position: relative，再把 video 绝对定位填满。
为什么 text-align: center 对 video 无效？
text-align: center 只影响行内内容对齐，而 video 是替换元素，默认行为类似 img，但它是 inline 级别，不是 inline-block。所以即使父容器写了 text-align: center，video 仍按基线对齐，顶部留空、左偏。
常见错误写法：<div style="text-align: center"><video></video></div> —— 看似居中，实则只是“看起来”居中，换字体、加文字或缩放后立刻暴露偏移。
真要靠文本对齐方案，得显式设 video { display: inline-block; vertical-align: middle; }，但不如直接上 Flex 或 block + margin 可靠。
最易被忽略的是：所有居中方案都依赖父容器有明确尺寸或约束。如果外层 div 没设宽高、没清除浮动、或用了 display: contents，flex 或 margin 都会失效。先检查父容器是否“存在感足够”，再调 video 样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
