必须用包裹 video 的 div 设 position: relative 才能准确定位播放按钮，因为 video 本身不创建可靠定位上下文；按钮需用 top: 50%、left: 50% 加 transform: translate(-50%, -50%) 居中，并确保容器宽高比匹配、移动端热区≥44px。
直接给 video 标签加 position: relative 并不能让自定义播放按钮居中——按钮会跑偏或失效，因为 video 本身不创建可靠的定位上下文。
为什么播放按钮不能直接在 video 上 absolute 定位
video 是行内级替换元素，默认 position: static，且浏览器对它的定位支持不一致。即使强行设 position: relative，也可能触发高度塌陷、基线错位或内联布局干扰，导致 top: 50% 计算失准。
- 错误现象：按钮出现在页面左上角、视频区域顶部空白、移动端点击热区偏移
- 根本原因：
absolute元素会向上查找最近的「已定位祖先」，若外层没设position: relative，就落到body或html上 - 不要试图用
video自身作为定位容器——它不是设计来干这个的
必须用包裹 div 设 position: relative
真正起作用的是一个显式声明了 position: relative 的父级 div，哪怕它只有这一个样式。这个容器负责“撑起”定位上下文，让按钮能准确锚定在视频可视区域内。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- HTML 结构必须是：
<div class="video-wrapper"><video></video><button class="play-btn"></button></div> - CSS 中
.video-wrapper必须含position: relative，哪怕其他样式为空 - 如果容器用了
display: flex或display: grid，仍要额外加position: relative——flex/grid 不自动创建定位上下文 - 避免用
position: static（默认值）或未声明position的父级，它们无法作为定位参考
play-btn 居中必须用 top: 50% + left: 50% + transform: translate(-50%, -50%)
只写 top: 50%; left: 50% 会让按钮的左上角落在中心点，而不是按钮整体居中。必须靠 transform 回拉自身宽高的一半，才能视觉和交互都精准对齐。
立即学习“前端免费学习笔记（深入）”；
- 完整按钮样式：
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); - 别用负 margin 替代
transform——按钮尺寸可能随响应式缩放或图标字体变化，负 margin 会失效 - 移动端必须确保按钮最小尺寸 ≥
44px × 44px，否则 iOS Safari 可能判定点击失败 - 记得设足够
z-index，防止被视频控件或弹幕层遮挡
视频容器宽高比和 object-fit 会影响按钮视觉位置
如果视频用了 object-fit: cover 但容器宽高比不匹配原始视频（比如容器是 4:3，视频是 16:9），画面会被裁剪，此时按钮虽然代码上居中，但看起来可能偏上或偏下。
- 解决方案：容器设
aspect-ratio: 16 / 9（或对应比例），再配object-fit: cover - 若需兼容旧浏览器，改用
padding-top百分比占位（如padding-top: 56.25%对应 16:9） - 按钮本身如果是 SVG 或字体图标，无需担心宽高不可控——
transform居中依然可靠 - 测试时务必在真机上点按，看热区是否覆盖整个按钮，而不仅是视觉中心
