中心图像垂直/水平地在另一个上没有尺寸

Question

我正在尝试让图片看起来有一个居中的播放按钮。然而，我不知道主图像的确切大小，因为它是动态生成的。

现在，叠加图像（播放按钮）位于左上角。如何让播放按钮显示水平和垂直居中？

谢谢。

<div class="videobox">
<img src="/mainimage.png">
<span></span>
</div>

.videobox { position: relative; }

.videobox span {
position:absolute;
left: 0px;
bottom: 0px;
width: 100%;
height: 100%;
z-index: 1;
background: transparent url(../img/elements/playbutton.png) no-repeat;
}

Answer 1

.videobox span {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
  background: url(../img/elements/playbutton.png) no-repeat center center;
}