如何仅使用CSS自动将绝对元素置于相对父级内

Question

我看到有关于这个主题的帖子,但没有一个专门回答我的问题

http://jsfiddle.net/27van/显示了如何水平居中文本.

我想在父div中垂直居中,而不使用div设置固定数量的像素(我需要它是动态的)

有线索吗？

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

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

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

你的更新小提琴