使用变换垂直对齐： translateY(-50%);在绝对定位的 div 内答案

【问题标题】：Vertical align using transform: translateY(-50%); inside absolutely positioned div使用变换垂直对齐： translateY(-50%);在绝对定位的 div 内
【发布时间】：2014-05-22 23:44:24
【问题描述】：

我正在尝试使用以下代码在绝对高度为 50% 的 div 中将 h2 垂直居中：

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

在 Chrome 上运行良好，但 h2 在 Safari IOS 中消失，除非我将 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, 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;
}

【问题讨论】：

HTML 和 CSS：jsfiddle.net/5cn5s 看起来是导致问题的高度正在寻找另一种将叠加层高度设置为 50% 的方法，有什么想法吗？ jsfiddle.net/5cn5s
那个小提琴不好..再给一个没有 PHP 的 HTML
对不起，给你：jsfiddle.net/5cn5s/10
-webkit-transform: translateY(-50%);帮我修好了，谢谢

标签： html css vertical-alignment

【解决方案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

【讨论】：

该解决方案实际上并未将文本垂直居中。
@user2204755 检查第二个。
实际上使用 :before 元素在单行上可以正常工作，但在多行标题上不行。
主要问题是您使用的是<h2>，它是一个块元素，浏览器对其应用边距、填充等，因此块的实际大小不会是您所期望的..如果您使用<span> <p> 并对其进行样式设置，它会容易得多。再加上问题是在 safari 中解决问题，你从来没有说过多行.. ;)

【解决方案2】：

我今天找到了一个解决方案，可以通过移动 safari 和移动 chrome 解决这个问题。

在示例中使用与 CSS h2 相同的代码，除了 put vertical-align:top;

这似乎修复了移动 Safari 上的 translateY。我希望这对某人有帮助！

【讨论】：

好问题...我不确定，不过想知道。

【解决方案3】：

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

【讨论】：

如果您还提供了一个在 jsFiddle.net 上工作的链接会更有帮助
你可以把它带到 flex-box 你需要的只是将父级设置为 {display:flex} 和子级 {margin:auto} 这是我可以用来查看浏览器上的支持@987654321 @希望对你有帮助

【解决方案4】：

前缀应该可以解决问题：

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

【讨论】：