css - 如何仅使用 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>

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 */
    }

您更新的 fiddle