Vertical aligner à l'aide de transformer: translateY(-50%); à l'intérieur en position absolue div

Je suis en train de la verticale), le centre de h2 à l'intérieur d'un div qui est en position absolue avec une hauteur de 50% en utilisant le code suivant:

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

Fonctionne très bien sur Chrome, mais le h2 disparaît dans Safari IOS à moins que j'ai régler le h2 être en position absolue et puis je ne peux pas le centre le texte avec text-align.

Toute aide beaucoup apprécié, j'ai essayé de faire ce travail toute la journée.

Edit: de Sorte qu'il ressemble à la hauteur de 50% est le problème de la div parent, si je le supprime le texte s'affiche dans IOS.
Je suis en train de réaliser une superposition qui couvre 50% de la hauteur de la vignette est-il une autre façon de l'obtenir pour couvrir 50% de la vignette?

#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;
}
  • Jsfiddle veuillez
  • HTML et CSS: jsfiddle.net/5cn5s dirait que c'est la hauteur qui est à l'origine du problème de recherche d'une autre façon de définir la hauteur de la superposition de 50%, des idées? jsfiddle.net/5cn5s
  • que le violon n'est pas bon.. donner un autre sans PHP à l'intérieur du HTML
  • Désolé, ici vous allez: jsfiddle.net/5cn5s/10
  • -webkit-transform: translateY(-50%); il fixe pour moi, merci pour cette
InformationsquelleAutor leanda | 2014-04-09