jquery - 垂直对齐具有百分比高度和宽度的 div 内的 div

Question

我试图在一个 div 中垂直对齐一个 div(为视频制作一个播放按钮)，我已经尝试了所有垂直对齐的传统方法，甚至尝试了一个 jquery 脚本来垂直对齐它，但到目前为止我仍然无济于事。

编辑 - 内容/圆圈播放按钮需要完全响应，所以我不能删除它的 20% 宽度和 20% 填充底部。

可以在此处找到该网站的实时版本 - http://www.mosesmartin.co.uk/digitalguys/gkn.php并且有问题的 div 是 'videoplay' div

HTML

<div class="rectanglewrap">
    <div class="rectangleimg" id="gknengine">
        <div class="videoplay vcenter"><span class="glyphicon glyphicon-play" id="playbutton"></span></div>
    </div>              
</div>

CSS

.rectangleimg{
  position:relative;
  height:0;
  width:100%;
  padding-bottom:50%;
}
.div-centerer {
  position: absolute;
  top: 0;
  width:100%;
  height:100%;
}

.vcenter {
  display: inline-block;
  vertical-align: middle;
}

.videoplay {
  border-radius: 100%;
  background-color: #12A537;
  height:0;
  width:20%;
  padding-bottom:20%;
  margin:0 auto;
}

请帮帮我，这让我很烦!

谢谢

Answer 1

尝试使用相对和绝对定位，你可以像这样使用百分比来适应移动设备:

.rectanglewrap {
    width: 100%;
    text-align: center;
    border: 1px solid #ddd;
    height: 200px;
    position: relative;
}
.videoplay {
    position: absolute;
    top:50%;
    margin-top: -10px;
    left: 50%;
    margin-left: -10%;
    width: 20%;
    background: #ddd;
}

上边距和左边距应分别为播放元素宽度和高度的一半(并且可以是百分比)。

参见 fiddle :http://jsfiddle.net/7fs52w2L/2/