中心图像垂直/水平在另一个无尺寸

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