如何仅使用 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 */
    }

您更新的小提琴