當「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中文網其他相關文章！