video标签默认左对齐，需用CSS居中：必须设width+display:block或父容器flex布局，响应式推荐max-width:100%+margin:0 auto+height:auto。
video 标签默认不居中，必须用 CSS 控制
浏览器对 <video> 的渲染和其他块级元素一样，默认左对齐、宽度撑满父容器（如果没设宽），不会自动居中。想让它水平居中，得靠 CSS 布局手段，不是加个属性就能解决。
常见错误现象：<video align="center"> 失效（align 属性在 HTML5 中已废弃，现代浏览器基本忽略）；只写 margin: 0 auto 却没设宽度，结果毫无反应。
- 必须给
<video>设置明确的宽度（比如width: 80%或固定值如width: 640px），否则margin: 0 auto不生效 - 推荐用
display: block确保它是块级行为（有些浏览器默认是 inline，会影响 margin 居中） - 如果父容器用了 Flex 布局，直接在父元素上加
justify-content: center更可靠
<div style="display: flex; justify-content: center;">
<video width="640" height="360" controls>
<source src="demo.mp4" type="video/mp4">
</video>
</div>
用 margin: 0 auto 居中时容易漏掉 display: block
margin: 0 auto 是最常用也最容易出错的方式。它只对块级元素起作用，而 <video> 在部分浏览器中默认是 inline 或 inline-block，导致左右 margin 不触发居中逻辑。
- 务必显式声明
display: block，哪怕只是内联样式：<video style="display: block; margin: 0 auto; width: 640px;"> - 如果视频还带文字说明或按钮，建议把
<video>单独包一层<div>，避免影响周边流式布局 - 注意：设了
width: 100%后再用margin: 0 auto没意义——它已经占满父容器了
响应式场景下，max-width + margin auto 更安全
当页面要适配手机、平板等不同屏幕时，固定宽度会出问题。这时候不能只靠 width: 640px，得让视频宽度随容器变化，同时保持居中。
立即学习“前端免费学习笔记（深入）”；
- 用
max-width: 100%替代width: 100%，防止视频超出父容器 - 保留
height: auto维持原始宽高比 - 仍然需要
display: block和margin: 0 auto
<video controls style="display: block; margin: 0 auto; max-width: 100%; height: auto;"> <source src="demo.mp4" type="video/mp4"> </video>
video 内部字幕、控制栏不会因居中失效，但 poster 图可能偏移
<video> 的 poster 属性图片默认按内容区域左上角对齐，如果视频本身被缩放或设置了 object-fit，poster 可能显示不全或错位。
- 如果用了
object-fit: cover或contain，记得同步调整poster图片尺寸和比例 - 控制栏（controls）位置由浏览器实现，居中不影响它，但若父容器太窄，控制栏文字可能被截断
- 移动端 Safari 对
<video>的内联样式支持较弱，建议把关键样式（如display,margin）抽到 class 中，避免内联失效
