javascript - 图像上的内容未垂直对齐

Question

我试图让我的 div 容器 .home-img-text 在其父 div .home-img 的中间垂直居中。我试过将 .home-img-text 设置为 position: absolute, relative，我试过 padding-top和其他一些东西，它根本不会从其父 div 的顶部移动。

可以在这个网站上查看:

click here

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

有没有人看出哪里出了问题？

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>

要在 .grand-parent 中垂直居中 .child 而不是 .parent 从中移除 position:relative .parent.