Question

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

可在此网站查看：

click here

我没有创建代码段，因为图片不会显示我的parallex效果。

有人看到了什么问题吗？

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。

图像上的内容未垂直对齐

1 个答案: