Question

我正在尝试使用以下代码在高度为50％的div内垂直居中一个h2：

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

在Chrome上正常工作，但是除非我将h2设置为绝对位置，然后我不能将文本对齐文本对齐，否则h2会在Safari IOS中消失。

任何帮助都非常感激，我一直在努力让这一天工作。

编辑：所以看起来高度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, 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

以下内容适用于safari（5.1.7）

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

JSFiddle

至于其他方式，因为您可以使用::before伪元素进行对齐：

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

}

检查此JSFiddle

Answer 2

我今天找到了一个解决移动safari＆amp; amp;移动铬。

在示例中使用与CSS h2相同的代码，但 vertical-align：top;

除外

这似乎解决了移动Safari上的translateY问题。我希望这有助于某人！

Answer 3

.selector {
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
}

Answer 4

前缀应该可以解决问题：

-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);

使用transform进行垂直对齐：translateY（-50％）;里面绝对定位的div

4 个答案: