无法将文本垂直对齐到 Window/Viewport 的中间

Question

我正在尝试将一些文本对齐到加载序列的底部，我认为最好的方法是使用垂直对齐。问题是它不起作用。我有代码的副本 here。 HTML:

<div id="bg_loader" style="background-image:url(http://www.myhhf.com/images/loading/myhhub_loading_4.gif);"></div>

CSS:

#bg_loader {
    width: 100%;
    height: 100%;
    z-index: 100000000;
    background-image: url(../images/loading/myhhub_loading.gif);
    background-repeat: no-repeat;
    background-position: center;
}
#bg_loader:before {
    content: "Thank You for Waiting";
    display: inline-block;
    width: 100%;
    height: 100%;
    vertical-align: middle;
    text-align: center;
    font-size: 140%;
    font-weight: bold;
    color: #080;
}

我对此事进行了 广泛的 研究。据我所知，应该可以正常工作。但是，我正在使用伪元素来插入我的文本，而且在这些特定类型的情况下，我找不到很多关于垂直对齐和伪元素的文档。

我发现这篇文章非常有用：Vertical-Align: All You Need To Know

我想知道为什么垂直对齐不起作用。我也愿意接受更好的方法来响应如何将我的文本放置在我的加载序列下方。我知道 calc()，这是我目前正在使用的。

CSS:

#bg_loader:before {
    content: "Thank You for Waiting";
    display: inline-block;
    position: absolute;
    bottom: calc(60% - 14em);
    width: 100%;
    text-align: center;
    font-size: 140%;
    font-weight: bold;
    color: #080;
}

更新：

我对 Pangloss 的代码（下面标记的答案）进行了一些编辑，使代码更加动态： jsfiddle

#bg_loader:after {
    content: "Thank You for Waiting";
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    height: 13.86em;
    line-height: calc(100% + (13.86em * 2) + 1.575em);
    text-align: center;
    font-size: 140%;
    font-weight: bold;
    color: #080;
}

基本上，我没有给 :after 元素一个固定的恶心像素填充，而是给它一个与图像相同的高度（以美丽流畅的 em 值）和一个计算出来的行高，以便将文本带到底部有一点填充。

现在，显然，这仍然需要一些工作，因为它与 firefox 不兼容（Firefox does not support calc() inside the line-height...。我也注意到 iPad 中的问题。我目前正在努力诊断问题。

我会尽量保持这个 post 更新。 (My progress will be tracked here.)

Answer 1

众所周知，对父元素和伪元素使用 relative 和 absolute 关系可以让您更好地控制定位。我补充说：

#bg_loader {
    position: relative;
}

#bg_loader:before{
    text-align: center;
    position: absolute;
    top: calc(50% + 120px);
}

使用calc()是保持排名的最佳方式。以我的经验控制，并为简单起见使用 text-align。这在移动领域也 'flex' 很好。

检查更新后的 fiddle 还有一些 lite reading

Answer 2

如果您在行内块元素上设置 vertical-align，它实际上会对齐元素本身，而不是内部内容，并且该元素的高度为 100%，所以没有任何反应，这是这里的主要问题。

其次，valign 位置实际上是相对于兄弟元素的高度（通常是最高的那个）。你的例子中没有任何兄弟姐妹。您所遵循的指南非常好，您可以再次阅读，但更仔细。

更新的代码片段：

#bg_loader:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
#bg_loader:after {
    content: "Thank You for Waiting";
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    padding-top: 270px; /*spacing*/
    text-align: center;
    font-size: 140%;
    font-weight: bold;
    color: #080;
}

完整的工作示例：

jsfiddle

html{
    height: 100%;
    min-height: 100%;
    overflow-y: scroll;
}
body{
    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
    background-color: #F1FAFC;
    background-attachment: fixed;
    font-size: 80%;
    margin: 0;
}
#bg_loader {
    width: 100%;
    height: 100%;
    z-index: 100000000;
    background-image: url(../images/loading/myhhub_loading.gif);
    background-repeat: no-repeat;
    background-position: center;
}
#bg_loader:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
#bg_loader:after {
    content: "Thank You for Waiting";
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    padding-top: 270px;
    text-align: center;
    font-size: 140%;
    font-weight: bold;
    color: #080;
}

<div id="bg_loader" style="background-image:url(http://www.myhhf.com/images/loading/myhhub_loading_4.gif);"></div>

无法将文本垂直对齐到 Window/Viewport 的中间

Trouble Vertically Aligning Text to Middle of Window/Viewport

css

vertical-alignment

pseudo-element