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

Posted 2023-03-05

【中文标题】使用绝对位置和百分比垂直居中子 div 时出现错误

【英文标题】：Bug when using absolute position and percentages to vertically center child div

【发布时间】：2013-08-04 14:16:58

【问题描述】：

我有一个 div，它是我的“弹出窗口”，我正在制作动画以显示在其父 div 的直接中心。所以我使用绝对定位、负边距和 left+top 来定位它，这样我就可以简单地在悬停时使用-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 的顶部+边距。

【问题讨论】：

Alexander，你想让 div(percents) 位于 div(pretendImage) 或 div(container) 的中心吗？

抱歉 div(pretendImage) 只是在我的示例中扩展 div(container) 并显示当我设置像素而不是百分比时它的效果。在我的代码中，img(pretendImage) 是 width:100%; height:auto，因此与 div(container) 的大小相同，我希望 div(percents) 像我更新的解决方法一样居中。

【参考方案1】：

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

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

奇怪的是上边距（和下边距）百分比。这些是相对于容器块的宽度。这没有什么帮助，除非包含块具有已知且固定的纵横比，否则对此几乎无能为力，在这种情况下，您可以根据宽度和纵横比计算所需高度的百分比值。

不知道 Safari 在做什么，但听起来很糟糕。

【讨论】：

哇，好吧，所以 Safari 中的 margin-top 使用父 div 的 height 来确定 margin-top:-40% 是什么？虽然通常它应该使用父 div 的 width 作为参考？我不知道它会引用父级的宽度，在我看来，Safari 的方法更有意义，因为顶部/底部边距处理高度，在使用百分比时它们应该受到高度的影响。像这样的跨浏览器问题将是我的死亡。

【参考方案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%);