css - 在另一个没有尺寸的情况下垂直/水平居中图像

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