html – 使用transform进行垂直对齐：translateY(-50％);里面绝

发布时间：2020-12-14 18:44:15 所属栏目：资源来源：网络整理

导读：我正在尝试使用以下代码将h2垂直居中在div内,该div绝对定位高度为50％： #owl-demo h2 { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);} 在Chrome上正常工作,但是在S

我正在尝试使用以下代码将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;
}

解决方法

以下是在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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!