图像上的内容未垂直对齐

Question

我正在尝试使我的div容器.home-img-text垂直位于其父div .home-img的中间。 我已经尝试将.home-img-text设置为position: absolute ， relative ，我尝试了padding-top和其他方法，但它根本不会从其父div的顶部移动。

可以在此站点上查看：

点击这里

我没有创建代码段，因为该图像不会以我的视差效果显示。

有人看到错了吗？

CSS：

.home-img {
    position: relative;
    margin: auto;
    width: 100%;
    height: auto;
    vertical-align: middle;
}
.parallax-window {
    min-height: 300px;
    background: transparent;
    position: relative;
}
.home-img-text {
    position: relative;
    z-index: 99;
    color: #FFF;
    font-size: 4em;
    text-align: center;
    top: 40%;
}

HTML：

<div class="home-img">
    <div class="parallax-window" data-parallax="scroll" data-image-src="/images/try.jpg">
    <div class="home-img-text">Quality Solutions</div>
</div>

Answer 1

将框模型元素垂直居中的正确方法是：

.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

---

更新：这是您的页面中发生的情况：

 .grand-parent { position: relative; width: 300px; height: 300px; top: 10%; left: 50%; transform: translateX(-50%); overflow: visible; border: 1px solid blue; } .parent { height: 400px; border: 1px solid red; position: relative; } .child { position: absolute; top: 50%; transform: translateY(-50%); text-align: center; width: 100%; } 

 <div class="grand-parent"> <div class="parent"> <div class="child">Quality Solutions</div> </div> </div> 

垂直中心.child在.grand-parent代替.parent删除position:relative从.parent 。