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

Question

我有jsfiddle demo。

我在中心有一个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%);
}