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