html - 垂直居中和可变高度的绝对 div

Question

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

问题是 parent 和 child 的高度在设计时都是未知的，所以我尝试使用百分比和负边距方法，但结果完全疯狂，我无法弄清楚我的代码有什么问题.

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%;
}

然后子项显示在父项顶部的某个位置，即使代码看起来像是将其垂直居中。在 fiddle 中，-50% 的边距计算为 -112px。什么鬼？

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

Answer 1

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

如果您对替代方案持开放态度，我建议改为使用:

.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 之外，这个支持很好)