Центральное изображение вертикально/горизонтально над другим без измерений

Я пытаюсь сделать изображение, похоже, имеющим кнопку воспроизведения, которая центрирована. Однако я не буду знать точный размер основного изображения, поскольку он динамически генерируется.

В настоящий момент оверлейное изображение (кнопка воспроизведения) находится в верхнем левом углу. Как я могу показать кнопку воспроизведения в вертикальном и вертикальном направлениях?

Спасибо.

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