垂直对准一个Div内部的DIV，该DIV的高度和宽度百分比

Question

我正在尝试在DIV内垂直对齐DIV（为视频制作播放按钮），并且我尝试了所有传统的垂直对齐方法，甚至尝试了一个可以垂直对齐的jQuery脚本，但是到目前为止，我仍然无济于事。

编辑 - 内容/圆形播放按钮需要完全响应，因此我无法删除20％的宽度和20％的填充底部。

可以在此处找到该网站的实时版本 - http://www.mosesmartin.co.uk/digitalguys/gkn.php所讨论的DIV是"视频舞会" 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;
}

顶部＆amp;左边的边缘应该是宽度的一半＆amp;播放元素的高度（＆amp;它们可以是百分比）。

请参阅小提琴：http：//jsfiddle.net/7fs52w2l/2/

Answer 2

由于您标记了问题jQuery，这是如何在jQuery中进行操作：

$('#playbutton').css('top', ($('#gknengine .videoplay').outerHeight() / 2) - ($('#playbutton').height() / 2));

您可能需要将其放入$(window).resize()处理程序中。

Answer 3

如果您不关心较旧的浏览器（例如9），则可以使用变换将DIV仅与CSS

相中

div.videoplay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  // margin-top: 1px <--- delete
}
#playbutton {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  // top: 1px <--- delete
}