嘿，这个问题我做视频播放器的时候也碰到过！完全不用靠JS计算坐标，用CSS就能轻松搞定，给你两种靠谱的方案：

方案一：Flexbox布局（最简单直观） #

Flex布局是现在做元素居中的首选，只要给视频容器设置flex属性，播放按钮自动就能牢牢钉在中心，不管用户怎么调整窗口尺寸都没问题。

代码示例： #

<!-- HTML结构 -->
<div class="video-container">
  <video src="your-video.mp4"></video>
  <button class="play-btn">▶️</button>
</div>

/* CSS样式 */
.video-container {
  position: relative; /* 确保按钮以容器为定位基准 */
  width: 100%; /* 初始宽度可自定义，支持用户调整 */
  height: auto; /* 随视频比例自适应高度 */
  display: flex;
  justify-content: center; /* 水平方向居中 */
  align-items: center; /* 垂直方向居中 */
}

.play-btn {
  position: absolute; /* 让按钮悬浮在视频上方 */
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.7);
  color: white;
  font-size: 24px;
  cursor: pointer;
}

方案二：绝对定位 + Transform（兼容性更优） #

如果需要兼容一些老浏览器，这个方案更稳妥。核心思路是先把按钮的左上角移到容器中心，再通过translate让按钮自身往左上偏移一半尺寸，从而实现完美居中。

代码示例： #

.video-container {
  position: relative; /* 必须设置，作为按钮的定位参考 */
  width: 100%;
  height: auto;
}

.play-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); /* 关键！基于按钮自身尺寸偏移 */
  /* 其他按钮样式可参考方案一 */
}

为什么你之前的方法没生效？ #

• 固定left: 200px和top: 200px是绝对数值，容器尺寸变化后自然就偏离中心了；
• text-align: center只能实现水平居中，而且只对行内/行内块元素有效，垂直方向的居中它管不了；
• 如果之前用了position但没效果，大概率是没给视频容器设置position: relative，导致按钮相对于整个页面（而非视频窗口）定位了。

这两种方案都能让播放按钮始终跟着视频窗口的中心走，完全不需要JS计算，试试吧！

内容的提问来源于stack exchange，提问作者kadina