Question

我有一个div是我的“弹出窗口”，我正在动画显示在其父div的直接中心。所以我使用绝对定位，负边距和左+顶部来定位它，以便我可以在悬停时使用-webkit-transform: translateY(-100%)简单地为其设置动画。适用于Safari和Mobile Safari。

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

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

<div class="container">
    <div class="pretendImage"></div>
    <div id="percents"></div>
</div>

和我的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的顶部+边距。

Answer 1

高度和最高百分比是相对于其包含块的高度 - 即具有“容器”类的div。包含块的高度由div的高度决定，类为“pretendImage”。

宽度，左边距和左边距离百分比是相对于其包含块的宽度 - 即具有类“容器”的div。包含块的宽度被确定为其包含块的百分比，在jsfiddle的情况下，它是初始包含块，它本身与视口的宽度相同。这不是您计算您认为需要的百分比的方式。您可以通过收缩包装position:relative（使用display:inline-block;或float:left;）元素并在其外创建另一个包装div来处理这一点，以隔开视口中的元素。

奇怪的是边缘顶部（和边缘底部）百分比。这些是相对于容器块的宽度。这没有用，除非包含块具有已知且固定的宽高比，否则几乎无法做到这一点，在这种情况下，您可以根据宽度和宽高比计算所需高度的百分比值。

不知道Safari正在做什么，但听起来很严重。

Answer 2

这适用于所有经过测试的浏览器和移动设备（Chrome，IE，Firefox，Safari，iPad，iphone 5和6，Android）。

我认为你只需要确保在下面添加整组变换规则以涵盖所有场景。

img.ui-li-thumb {
    position: absolute;
    left: 1px;
    top: 50%;

    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

使用绝对位置和百分比垂直居中子div时的错误

2 个答案: