视频容器必须设 position: relative 且 absolute 按钮需配合 transform: translate(-50%, -50%) 才能真正居中，否则按钮会定位错乱； 标签不可直接作为定位容器，须用包裹 div 设置 relative；移动端需确保按钮最小触控尺寸为 44×44px 并设置足够 z-index。
视频容器必须设 position: relative
不加这句，absolute 按钮会相对于最近的定位祖先找位置，经常跑到页面顶部或左上角去。常见错误是只给按钮设 position: absolute，忘了外层容器要“撑起定位上下文”。
使用场景：自定义播放器 UI、H5 视频封面页、弹幕叠加层等需要精确控制按钮位置的地方。
- 容器元素（比如
<div class="video-wrapper">）必须显式设置 <code>position: relative，哪怕它没其他样式 - 不要用
position: static（默认值）或未设置 position 的父级作为定位参考 - 如果容器本身是
display: flex或grid，仍需加position: relative，flex/grid 不自动创建定位上下文 - 按钮样式必须包含：
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); - 避免用
margin-top/margin-left负值代替，因为按钮尺寸可能动态变化（比如响应式缩放） - 如果按钮是 SVG 或字体图标，确保其
width/height可预测，否则transform居中依然可靠 - 务必用一个包裹
<div> 包住 <code><video></video>，并对这个<div> 设 <code>position: relative - 不要给
<video></video>加position，除非你明确需要脱离文档流（通常不需要） - 如果用了
object-fit: cover，注意容器宽高比要匹配，否则居中按钮可能视觉偏移 - 给按钮加
min-width: 44px; min-height: 44px;（苹果人机指南推荐最小触控尺寸） - 确保按钮有足够
z-index，别被视频 poster 或其他层盖住 - 如果按钮是伪元素（
::before），改用真实元素，伪元素热区支持不稳定
absolute 按钮居中要用 top/left + transform
直接写 top: 50%; left: 50% 只会让按钮左上角在中心，不是整体居中。必须配合 transform: translate(-50%, -50%) 才能真正居中。
性能影响很小，但兼容性要注意：IE9+ 支持 transform，如果真要兼容 IE8，得换方案（比如负 margin，但需知道按钮宽高）。
立即学习“前端免费学习笔记（深入）”；
视频标签本身不能直接当定位容器用
<video></video> 默认是 inline 元素，且原生不支持 position 定位上下文。直接对它设 relative 并不可靠——某些浏览器下会破坏内联布局或触发怪异高度计算。
错误现象：按钮位置飘移、视频区域出现空白、移动端点击区域错位。
移动端点击热区要额外处理
居中按钮在手机上常点不中，尤其 iOS Safari。表面看居中了，实际 touchstart 响应区域可能偏小或被遮挡。
原因：按钮本身尺寸小（比如 40×40px），而 CSS 的 transform 不放大交互热区；同时，iOS 对 absolute 元素的触摸判定更严格。
relative，和按钮没加 transform——这两处一错，整个居中就失效，而且不容易一眼看出来。
