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

變換的魔力：翻譯(-50%,-50%)

處理大圖像或全螢幕元素時， CSS開發人員經常使用一個奇怪的程式碼片段：

.item {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

這段程式碼背後的目的是什麼，它是如何實現的有效嗎？

transform 屬性會移動元素相對於其原始參考點的位置。在這種特定情況下，translate(-50%, -50%) 將元素在 X 軸和 Y 軸上平移自身大小的 -50%。

要理解為什麼這是必要的，讓我們打破它向下進入其組件：

• translateX(-50%)：將元素向左移動其寬度的50% ，將其中心點移動到它之前的左上角。
• translateY(-50%)：將元素向上移動其高度的 50%，再次將中心點帶回原來的左上角。

透過將 top 和 left 設定為 50%，我們最初將元素的左上角移到其父容器的中心。然而，這使得元素的中心點偏離父元素的中心。

transform:translate(-50%, -50%) 透過將元素向左和向上移動一半來修正這個問題。它自己的大小。這可確保元素的中心點與其父元素的中心點對齊，從而實現完美的水平和垂直居中。

要視覺化效果，請將滑鼠懸停在以下程式碼片段上：

body {
  margin: 0;
  padding: 0;
}

.parent {
  background-color: #ccc;
  width: 100vw;
  height: 100vh;
  position: relative;
}

.child {
  background-color: rgba(0,0,255,0.5);
  width: 50px;
  height: 50px;
  position: absolute;
  top: 50%;
  left: 50%;
}

.child::before {
  background-color: rgba(255, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  content: '';
  transition: all .5s ease-in-out;
}

body:hover .child::before {
  transform: translate(-50%, -50%);
}

請注意，當您將滑鼠懸停在父容器上時，居中元素的紅色“幽靈」如何平滑地移動到位。這示範如何使用transform:translate(-50%, -50%)在CSS中實現完美居中。

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