Question

我在一个相对定位的父母中有一个绝对定位的孩子。孩子应该在父母旁边垂直居中。看到这个jsFiddle：http://jsfiddle.net/wAY3T/

问题是父母和孩子的身高在设计时都是未知的，所以我尝试使用百分比和负边缘方法，但结果完全是疯了，我无法弄清楚我的代码有什么问题

HTML：

<div class=parent>
    <div class=child>Absolute div</div>
    Some content of the parent
</div>

CSS：

.parent {
    position: relative;
}

.child {
    position: absolute;
    right: 100%;
    top: 50%;
    margin-top: -50%;
}

然后，孩子显示在父母顶部的某个地方，即使代码看起来像是垂直居中。在小提琴中，-50％的保证金计算为-112px。 WTF？

如果你知道发生了什么，请帮助我。我已经挣扎了几个小时。

Answer 1

百分比margin始终相对于包含块的宽度，因此这不会像您期望的那样工作。

如果您愿意接受替代方案，我建议改为使用：

.parent {
    position: relative;
}

.child {
   -o-transform: translateY(-50%);
   -webkit-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    position: absolute;
    right: 100%;
    top: 50%;
}

Updated fiddle（除IE8外，这一点得到了很好的支持）

垂直居中和具有可变高度的绝对div

1 个答案: