html - 在另一幅图像的中间居中对齐重叠图像

Question

我想在主图像的中心显示播放按钮，并希望它在不同的屏幕尺寸上自动对齐到中心。

Fiddle example

我尝试了不同的东西，但有点放弃了，我不确定我是否使用了错误的结构，或者同样的事情可以用更简单和更好的方式完成。

<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
    <div class="video-item-wrapper">
        <div class="video-image-wrapper">
            <img src="http://placehold.it/600x400" class="img-responsive" />
        </div>
        <div class="play-item-wrapper">
            <img src="http://placehold.it/50.png/09f/fff" />
        </div>
        <div class="video-details-wrapper"> <span>this is video title</span>

        </div>
    </div>
</div>

Answer 1

添加CSS

.video-item-wrapper{  position: relative;}
.play-item-wrapper{position: absolute;top: 50%;  left: 50%;margin-left: -25px;
  margin-top: -25px;z-index: 9999;}