在具有一定百分比的高度和宽度的div中垂直对齐div

Question

I'm trying to vertically align a div inside a div (to make a play button for a video) and i've tried all the traditional methods of vertically aligning, and have even tried a jquery script to vertically align it, but as of yet i'm still to no avail.

EDIT - The content / The circle play button needs to be fully responsive so i can't remove the 20% width and the 20% padding-bottom it has.

A live version of the website can be found here - http://www.mosesmartin.co.uk/digitalguys/gkn.php and the div in question is '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;
}

Please help me, this is bugging the hell out of me!

Thankyou

Answer 1

Since you tagged the question jQuery, here's how to do it in jQuery:

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

You'll probably want to put it in a $(window).resize() handler.

Answer 2

Try using relative and absolute positioning, you can use percentages to adapt to mobile like so:

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

The top & left margins should be half the width & height of the play element respectively (& they can be percentages).

See Fiddle: http://jsfiddle.net/7fs52w2L/2/

Answer 3

If you don't care about older browser (eg IE < 9) you can use transform to center your div only with 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
}