title: Vertical align using transform: translateY(-50%); inside absolutely positioned div
body: <p>I'm trying to vertically centre a h2 inside a div that is absolutely positioned with a height of 50% using the following code:</p>
  
  <pre><code>#owl-demo h2 {
      position: relative;
      top: 50%;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
  }
  </code></pre>
  
  <p>Works fine on Chrome, but the h2 disappears in Safari IOS unless I set the h2 to be positioned absolute and then I can't centre the text with text-align.</p>
  
  <p>Any help much appreciated, I've been trying to make this work all day.</p>
  
  <p><strong>Edit:</strong> So it looks like the height 50% is the problem on the parent div, if I remove it the text appears in IOS.
  I'm trying to achieve an overlay that covers 50% of the thumbnail height is there another way to get it to cover 50% of the thumbnail?</p>
  
  <pre><code>#owl-demo  .thumb-overlay {
      text-align: center;
      height: 50%;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  background:rgba(0, 0, 0, .8);
  z-index: 9999;
  opacity:0;
      filter: alpha(opacity = 0);
      -webkit-transition: all 300ms ease-out;
      -moz-transition: all 300ms ease-out;
      -o-transition: all 300ms ease-out;
      -ms-transition: all 300ms ease-out;
      transition: all 300ms ease-out;
  }
  
  #owl-demo  .thumb-overlay:hover {
      opacity:0.75;
      filter: alpha(opacity = 75);
      transition:opacity 0.25s;
      -moz-transition:opacity 0.25s;
      -webkit-transition:opacity 0.25s;
  }
  
  .touch #owl-demo  .thumb-overlay,  {
      opacity:1;
      filter: alpha(opacity = 1);
  }
  
  #owl-demo h2 {
  font-size: .875em;
      position: relative;
      top: 50%;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
      color: $white;
  }
  </code></pre>