在绝对定位的 div 中垂直居中文本

Question

我正在尝试垂直居中文本，这些文本位于绝对定位的div内。

我已经尝试使用table-cell方法，但没有成功。这是一个响应式布局，所以我想避免设置固定高度，也不想使用Javascript。

谢谢 链接到jsbin演示 HTML和CSS:

<div class="page-banner" style="background: url(http://www.bimga.com.php53-3.ord1-1.websitetestlink.com//wp-content/uploads/BIMGA_Website_InteriorPage_Banners_About.jpg) no-repeat scroll 0 0 / cover transparent">
    <img style="visibility:hidden" src="http://www.bimga.com.php53-3.ord1-1.websitetestlink.com//wp-content/uploads/BIMGA_Website_InteriorPage_Banners_About.jpg">
    <div class="left">
        <div class="page-banner-text">this text needs to be verticall centered</div>
    </div>
</div>

<style type="text/css">
.page-banner {
    margin-bottom: 35px;
    list-style: none;
    width: 100%;
    padding-left: 0;
    position: relative;
}

.page-banner img {
    width: 100%;
    height: auto;
}
.page-banner .left {
    background-color: rgba(10, 65, 142, .75);
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    height: 100%;
    text-align: center;
    width: 50%;
}    
</style>

- farjam

---

可能是在绝对定位的div中居中文本的重复问题。 - Paulie_D

不确定是否重复。这里高度为100％，所以无法使用vertical-align:middle;。 - Sébastien Gicquel

@Paulie_D 我在描述中提到table-cell方法对我无效。 - farjam

Answer 1

我们可以这样使用transform：

看看jsBin！

CSS

.page-banner-text {
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
}

点击此处了解更多关于这个技术的信息。

- misterManSam

Answer 2

你可以将文本位置设置为绝对定位。然后给它一个 top: 50% 的属性，并且给它高度的一半大小的负上边距。

- almo

---

我不知道高度（除非我在JavaScript中计算它，但我试图避免这样做）。这是一个响应式布局。 - farjam

即使在响应式布局中，您也应该知道文本的高度。如果不知道，请设置一个 JavaScript，在调整大小时根据文本高度的一半编辑顶部边距。 - MaineCoder

Answer 3

我不太喜欢使用position:absolute和top:50%，因为这样在多个浏览器上的支持可能会有问题（尤其是在旧版IE上），所以我更喜欢在你的.page banner类中添加line-height:x em;。使用em是因为你已经通过百分比定义了高度，所以无论实际像素高度如何，它都需要始终居中。

.page-banner .left:after {

content: "Background text";
position: absolute;
top: 40%;
left: 35%;
z-index: -1;

} 

- Defain

---

尝试调整窗口大小。我无法给它一个“固定”的高度或行高。 - farjam

我相信在这种情况下，您需要使用JavaScript或jQuery。 - Defain

抱歉，我完全忘记了CSS伪命令。请查看我的更新答案 :) - Defain