html纵向占位置,html – 使用绝对位置和百分比垂直居中子div时的错误

我有一个div是我的“弹出窗口”,我正在动画显示在其父div的直接中心.因此我使用绝对定位,负边距和左上角来定位它,以便我可以使用-webkit-transform：translateY(-100％)在悬停时简单地为其设置动画.适用于Safari和Mobile Safari.

如果您在Chrome或Firefox中使用像素,它可以正常工作,即使您使用所有百分比,但使用像素设置父div宽度也可以.但是,如果你使用所有百分比FF Chrome似乎完全是下铺,并根据我无法弄清楚的东西渲染百分比.

Fiddle Example:在Safari和FF / Chrome中查看此内容,以确定Safari呈现的#pixels与#percents相同,并且应该在两者中呈现.是Safari正在渲染这个错误吗？

和我的CSS：

#percents {

width:100%;

height:100%;

position:absolute;

top:50%;

left:50%;

margin:-50% 0 0 -50%;

}

.container {

position:relative;

width:50%;

height:auto;

}

.pretendImage {

width:200px;

height:200px;

}

好吧,我通过添加一个额外的包装器找到了一种解决方法.我仍然想知道是什么原因引起的.

My workaround: Fiddle使用包装器以避免必须计算使用80％宽度/高度的内部div的顶部边距.