video 默认不居中因其是行内级替换元素，需设 display: block + width 或用 flex 父容器 justify-content/align-items 居中，并配 object-fit 与 object-position 控制 poster 对齐。
video 标签默认不居中，因为它本质是行内级替换元素（类似 img），直接加 margin: 0 auto 或 text-align: center 都大概率失效——除非你清楚知道父容器宽度、显示模式和对齐上下文。
为什么 margin: 0 auto 单独写在 video 上没反应
根本原因是：浏览器只对「块级元素 + 有明确宽度」才应用自动外边距居中逻辑。video 默认 display: inline，所以 margin: 0 auto 完全被忽略。
- 错误写法：
<video style="margin: 0 auto;">—— 不生效，没改显示类型 - 勉强可行但脆弱的写法：
<video style="display: block; width: 640px; margin: 0 auto;">—— 依赖固定宽，响应式下易溢出或留白 - 真正起效的前提：父容器不能是
flex或grid（会覆盖margin行为），且自身必须设width（不能是100%）
用 Flex 布局实现可靠居中（推荐首选）
这是目前最简洁、兼容性足够（Chrome 29+ / Firefox 20+ / Safari 9+ / Edge 12+）、且无需预知视频尺寸的方案。关键点在于控制「父容器」，而非 video 自身。
- 给
video的**直接父容器**设：display: flex、justify-content: center、align-items: center - 父容器必须有明确高度（比如
height: 100vh或固定像素），否则align-items: center垂直居中无效 -
video本身建议加max-width: 100%和height: auto，防大屏溢出 - 不要给
video设width和height属性（会破坏响应式比例），让 CSS 控制更灵活
<div style="display: flex; justify-content: center; align-items: center; height: 100vh;">
<video controls max-width="100%">
<source src="demo.mp4" type="video/mp4">
</video>
</div>
poster 图片偏上或左右不对称？补一行 object-position
即使视频居中了，poster 图可能仍偏顶、偏左——这不是布局问题，而是 object-fit: contain（video 默认行为）的对齐锚点是 top left，不是居中。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 必须同时设置：
object-fit: contain+object-position: center center - 只加
object-position不生效，它必须与object-fit配合使用 - 适用于所有带
poster的场景，尤其小屏设备上效果明显
<video controls style="object-fit: contain; object-position: center center;"> <source src="demo.mp4" type="video/mp4"> </video>
需要叠加文字层时，别用 position: absolute 硬定位
如果要在视频上盖标题、字幕等文本，用绝对定位 + transform: translate(-50%, -50%) 容易导致长文本不换行、溢出或截断——因为绝对定位元素默认无宽度约束，white-space: normal 失效。
- 更现代的解法：用
display: grid+place-items: center，让video和.overlay共享同一网格区域 - 文本自动继承容器宽度，
text-align: center和word-wrap正常工作 - 避免手动算
max-width，响应式适配更自然
真正难的不是“怎么让它看起来居中”，而是理解 video 的盒模型特性、object-fit 的默认行为，以及不同布局上下文（flex/grid/absolute）之间的冲突点。漏掉任意一个细节，比如父容器缺高度、object-position 没配 object-fit、或叠加层没设宽度约束，都会让居中在某个设备或状态下突然失效。
