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

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;
}