`transform:translate(-50%, -50%)`如何實現CSS完美居中？

CSS中「transform:translate(-50%,-50%)」的意義

在網頁設計中，元素居中是對於美觀和功能至關重要。 CSS 程式碼片段「transform：translate(-50%, -50%)」在實現完美元素對齊方面發揮關鍵作用。

此 CSS 屬性沿著 x 和 y 軸平移元素，有效地移動它在指定的方向。 “(-50%, -50%)”值表示元素應向左移動其寬度的 50%，向上移動其高度的 50%。

為什麼需要進行此轉換？當元素定位為「left: 50%; top: 50%;」時，其左上角與父元素的中心對齊。然而，從視覺上看，該元素似乎偏離了中心。

「transform:translate(-50%, -50%)」透過將元素的中心移回其原始左上角來修正此問題。這確保了元素的中心現在與其父元素的中心精確對齊，從而實現完美的水平和垂直居中。

作為一個實際範例，在英雄圖像或全螢幕佈局、文字或圖像中可以使用此程式碼片段居中。它允許它們相對於父元素保持靜止，從而防止它們在調整視窗大小或滾動時移動。

為了說明這一點，請考慮具有紅色背景的父元素和具有藍色背景的子元素。當滑鼠懸停在父元素上時，子元素的紅色「幽靈」會移到中心，明顯地展示了「transform：translate(-50%, -50%)」使元素居中的效果。

以上是`transform:translate(-50%, -50%)`如何實現CSS完美居中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！