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

Question

我有这个jsfiddle演示.

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