当“left: 50%”正常工作时，为什么“top: 50%”不能将我的元素垂直居中？

CSS top Percent 行为不符合预期：深入研究原因

在追求响应式布局时，您会遇到一个异常情况，其中“top :50%” 未按预期工作，而“left:50%” 则正常工作。为什么会发生这种情况？

要理解这种行为，请考虑以下父子元素结构：

<div>

解决问题的关键在于理解“top”属性如何在CSS。当您指定百分比（例如“50%”）时，它是相对于父容器的高度进行计算的。但是，在这种情况下，父容器没有定义明确的高度，因此“top”属性是根据未知值有效计算的。

要解决此问题，您需要为父容器建立固定高度。这将为子元素的顶部位置提供必要的参考点。

示例 1：定义高度

<div>

通过向父元素提供 200px 的高度div，子 div 的顶部位置现在正确计算为 200px 的 50%，从而实现预期的垂直居中。

示例 2：拉伸容器

替代方案方法涉及拉伸父容器以占据整个可用空间：

<div>

通过定义容器的顶部、底部、左侧和右侧属性，它会扩展以填充可用空间。然后计算子 div 相对于拉伸容器的顶部位置，实现相同的居中效果。

以上是当“left: 50%”正常工作时，为什么“top: 50%”不能将我的元素垂直居中？的详细内容。更多信息请关注PHP中文网其他相关文章！