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

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

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

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

<div>
<p>解决问题的关键在于理解“top”属性如何在CSS。当您指定百分比（例如“50%”）时，它是相对于父容器的高度进行计算的。但是，在这种情况下，父容器没有定义明确的高度，因此“top”属性是根据未知值有效计算的。</p>
<p>要解决此问题，您需要为父容器建立固定高度。这将为子元素的顶部位置提供必要的参考点。</p>
<p><strong>示例 1：定义高度</strong></p>
<pre class="brush:php;toolbar:false"><div>
<p>通过向父元素提供 200px 的高度div，子 div 的顶部位置现在正确计算为 200px 的 50%，从而实现预期的垂直居中。</p>
<p><strong>示例 2：拉伸容器</strong></p>
<p>替代方案方法涉及拉伸父容器以占据整个可用空间：</p>
<pre class="brush:php;toolbar:false"><div><p>通过定义容器的顶部、底部、左侧和右侧属性，它会扩展以填充可用空间。然后计算子 div 相对于拉伸容器的顶部位置，实现相同的居中效果。</p></div>