变高垂直定心和绝对分度

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%的利润率计算为-112便士。见鬼？

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

Answer 1

百分比裕度总是相对于包含块的宽度，因此这将不像您所期望的那样工作。

如果您有其他选择，我建议您使用：

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

更新小提琴 (除了IE8之外，这是很好的支持)