在 div 中垂直和水平居中播放按钮

Question

我在中间有一个 vimeo 电影的缩略图（这里是一个占位符）我想要一个播放 btn。

整个图像都是可点击的，所以播放按钮仅供参考。

我想要播放按钮正中。

我可以用负边距来做，但我真的不知道播放按钮的大小。

我怎样才能在知道播放按钮尺寸的情况下使播放按钮居中。

.video_thumbnail {
  border: 1px solid red;
  position: relative;
}

.video_thumbnail:hover {
  cursor: pointer;
}

.video_thumbnail .play-btn {
  background: white;
  background: blue;
  display: inline-block;
  padding: 25px;
  position: absolute;
  top: 50%;
  left: 50%;
  /*
            margin-left: -35px;
            margin-top: -35px;
            */
}

.video_thumbnail .play-btn:after {
  content: "";
  display: block;
  position: relative;
  left: 2px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 20px;
  border-color: transparent transparent transparent white;
}

Answer 1

您可以使用 transform: translate(-50%, -50%);.

Jsfiddle

.video_thumbnail .play-btn {
    background: white;
    background: blue;
    display: inline-block;
    padding: 25px;
    position: absolute;    
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

在 div 中垂直和水平居中播放按钮

Center play button vertically and horizontally in div

css

center