播放暂停按钮必须用外层容器包裹视频并设为flex容器，或用position: absolute配合transform: translate(-50%, -50%)实现精准居中，且不依赖js和图标尺寸。
播放暂停按钮（通常是一个 <button></button> 或 <div>）要精确<a style="color:#f60; text-decoration:underline;" title="垂直居中" href="https://m.php.cn/zt/62690.html" target="_blank">垂直居中</a>在 <code><video></video> 画布中央，核心不是“怎么定位”，而是“它必须相对于视频可视区域定位，且不随视频尺寸变化偏移”。现代方案里，flex 最稳，但必须绕开两个常见陷阱：父容器不是视频本身、按钮不能脱离视频的定位上下文。
video 元素内部无法直接 flex 居中
你不能对 <video></video> 标签本身设 display: flex——浏览器原生控件会破坏布局，且 <video></video> 不是常规块容器，子元素（如自定义按钮）默认被忽略或渲染异常。所有自定义控制层必须包裹在独立容器里。
- 正确结构：用一个
<div class="video-wrapper"> 包住 <code><video></video>和按钮，这个 wrapper 才是 flex 容器 - 错误写法：
video { display: flex; align-items: center; }—— 多数浏览器直接无视 - 视频需加
width: 100%; height: 100%（或固定值），否则 wrapper 内部高度塌陷，flex 失效 - wrapper 必须设
position: relative，否则top/left会相对于整个页面计算 - wrapper 高度不能靠内容撑开——视频默认不占高度，必须显式设
height（如height: 480px）或用aspect-ratio（Chrome 114+ / Safari 16.4+） - 如果用
aspect-ratio: 16/9，记得同时设width: 100%，否则高度不生效 - 坚持用
transform: translate(-50%, -50%)，它基于元素自身盒模型，不依赖预设值 - 避免拆成
translateX(-50%) translateY(-50%)——容易漏写、拼错，且无实际好处 - 按钮建议设
border: none; background: transparent; cursor: pointer，防止默认样式干扰居中视觉
wrapper 必须有明确宽高 + position: relative
自定义按钮要用 position: absolute 叠在视频上，而 top: 50%; left: 50%; transform: translate(-50%, -50%) 是唯一能适配动态尺寸（比如响应式视频）的方案。但它依赖 wrapper 的定位上下文和尺寸基准。
按钮自身尺寸不确定时，transform 是唯一可靠解
播放/暂停图标常为 SVG 或字体图标，宽高不固定。用负 margin（如 margin-top: -24px）或 calc() 都要求提前知道尺寸，一换图标就崩。
真正容易被忽略的是：视频加载过程中，offsetWidth 和 offsetHeight 可能为 0，导致 JS 动态计算居中的逻辑失效；纯 CSS 方案（flex 或 absolute + transform）不依赖 JS，才是生产环境首选。只要 wrapper 尺寸稳定，按钮就能始终钉在正中心，哪怕视频还没加载完帧。
