如何使用纯CSS自动将绝对定位的元素居中在相对定位的父元素内？

Question

我看到有些帖子涉及这个主题，但它们都没有具体回答我的问题。 http://jsfiddle.net/27van/ 演示了如何水平居中文本。

我想垂直居中父级 div 中的文本，而不使用设置固定像素数的 top（而我需要它是动态的）。

有什么线索吗？

.parent_div {
  position: relative;
  text-align: center;
}

.child_div {
  position: absolute;
  width: 100%;
  top: 70px;
}

<div class="parent_div">
  <img src=...></img>
  <div class="child_div">
    <h1>Some Title</h1>
  </div>
</div>

- user3075049

---

你目前尝试了什么？你的代码是什么样子的？我们现在只能提供一般性的解决方案。 - Zach Saucier

编辑了问题以添加我尝试过的内容！ - user3075049

那么你想要垂直居中什么？h1标签吗？ - iBrazilian2

我想把子元素 child_div 居中。如果我添加更多的文本，如果我也添加了一张图片，我希望它始终位于父元素 parent_div 的中心。 - user3075049

Answer 1

因为你已经将子元素的宽度设置为100%，所以我猜你想垂直居中对齐...这种情况下，你需要知道.child-div的高度，如果它有一个固定的高度，那么你可以使用以下方法：.parent_div { position: relative; }

.child-div {
    position: absolute;
    height: 100px; /* for example */
    top: 50%;
    margin-top: -50px /* height divided by 2 */
}

如果高度未知，则可以使用相同的方法，但通过jQuery计算高度和边距。而且，如果您想要水平对齐，可以使用相同的方法，但需要进行以下更改...在这种情况下，您需要固定宽度。

.child-div {
        position: absolute;
        width: 100px; /* for example */
        left: 50%;
        margin-left: -50px /* width divided by 2 */
    }

您的更新版代码示例

- Nishant