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

理解「變換：翻譯（-50%，-50%）」的作用

使用英雄圖像或元素時跨越整個螢幕，常常會遇到這樣的CSS 程式碼：

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

但是這段程式碼是做什麼用的實際完成了嗎？

理解這段程式碼的關鍵是要認識到它將元素的中心與其父元素的中心對齊。這是透過以下方式實現的：

• translateX(-50%): 將元素向左移動其寬度的 50%，有效地將其沿 x 軸居中。
• translateY(-50%): 將元素往上移動 50% height，沿著 y 軸居中。

透過將元素向左和向上移動其寬度和高度的一半，使元素的中心與其父元素的中心對齊，從而實現水平和垂直和垂直居中。

為了說明這一點，請考慮以下程式碼片段：

body {
  margin: 0;
  padding: p;
}

.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%);
}

當您將滑鼠懸停在父級上時元素中，透過應用變換：translate(-50%, -50%) 屬性，幽靈元素(.child::before) 變得視覺居中。

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