Vertical align using transform: translateY(-50%); inside absolutely positioned div

Question

I'm trying to vertically centre a h2 inside a div that is absolutely positioned with a height of 50% using the following code:

#owl-demo h2 {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

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.

Any help much appreciated, I've been trying to make this work all day.

Edit: 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?

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

Answer 1

The following is working for me in safari (5.1.7)

#owl-demo h2 {
 font-size: 1em;
 -webkit-transform: translateY(100%);
 -ms-transform: translateY(100%);
 transform: translateY(100%);
 color: white;
}

JSFiddle

As for other ways, since you can make use of ::before pseudo element for aligning :

#owl-demo .thumb-overlay::before {
content:"";
display:block;
height:30%;

}

check this JSFiddle

Answer 2

I found a solution today to solve this issue with mobile safari & mobile chrome.

Use the same code you already have for the CSS h2 in your example, except put vertical-align:top;

This seems to fix the translateY on mobile Safari. I hope this helps someone!