html div内容纵向对齐,html – 使用transform进行垂直对齐：translateY(-50％);里面绝对定位的div...

我正在尝试使用以下代码将h2垂直居中在div内,该div绝对定位高度为50％：

#owl-demo h2 {

position: relative;

top: 50%;

-webkit-transform: translateY(-50%);

-ms-transform: translateY(-50%);

transform: translateY(-50%);

}

在Chrome上正常工作,但是在Safari IOS中h2消失,除非我将h2设置为绝对位置,然后我无法使用text-align将文本居中.

任何帮助非常感谢,我一直在努力使这项工作整天.

编辑：所以看起来高度50％是父div的问题,如果我删除它,文本出现在IOS中.

我正在尝试实现覆盖50％缩略图高度的叠加层是否有另一种方法可以覆盖50％的缩略图？

#owl-demo .thumb-overlay {

text-align: center;

height: 50%;

width: 100%;

position: absolute;

left: 0;

bottom: 0;

background:rgba(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;

}