javascript - 如何将播放按钮置于响应式视频元素的中心

Question

我正在使用 HTML5 视频元素制作视频播放器，我有一个播放按钮可以启动视频。但是我的问题是如何让播放按钮位于视频的中央。使用位置或边距将按钮推到视频的中心是行不通的，因为当您调整窗口和播放器的大小时，播放按钮将移出位置。

我尝试过使用定位 - 左/上等，并且我习惯于使用相同的概念来放置边距，但是这些不适用于响应式视频播放器，我不知道如何处理这个问题并且是想知道是否有人有建议。

Answer 1

用于居中任何东西(img、图标、文本等)

.parent_item{
   position: relative;
}
.center_item {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
}

.parent_item 是您的视频包装器类，而 .center_item 是您播放图标或按钮，它也是响应式的。