CSS `transform:translate(-50%, -50%)` 如何將元素置中？

了解CSS 變換屬性：translate(-50%, -50%)

使用英雄圖像或全屏元素時，通常會遇到屏幕到包含以下內容的CSS 代碼：

此CSS程式碼段引發問題：這段程式碼實際上做了什麼？

translate(-50%, -50%)的作用

轉換的目的：translate(-50 %, -50%) 屬性是將元素平移或移動到特定位置。在這種情況下，元素會在水平和垂直方向上平移。

水平翻譯：translateX(-50%)

翻譯的第一部分， translateX(-50%)，將元素向左移動其寬度的 50%。這相當於將元素的左邊緣移動到其父容器的中心。

垂直翻譯：translateY(-50%)

翻譯的第二部分、translateY(-50%)，將元素向上移動其高度的 50%。這相當於將元素的頂部邊緣移動到其父容器的中心。

將元素居中

組合，翻譯（-50%, -50% ) 有效地將元素的中心移動到其父容器的中心。這通常用於創建視覺上水平和垂直居中的元素。

概念證明

為了說明這個概念，請考慮以下程式碼片段：

當您將子元素放置在父元素內時，您可以看到它在水平和垂直方向上均居中。這是因為transform:translate(-50%, -50%)屬性已經將子元素的中心移到了父容器的中心。

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