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

使用「translate(-50%,-50%)」轉換元素

在Web 開發中，居中元素可能是一項常見任務，特別是對於全螢幕圖像或英雄部分。用於此目的的一個經常遇到的CSS 片段是.item { top: 50%;左：50%；變換：翻譯（-50%，-50%）； }.

解構程式碼

此程式碼的目標是將元素的中心與其父容器的中心對齊。將其分解為各個組成部分：

• 頂部：50%； left: 50%;：這將元素的頂部和左側位置分別設定為父級高度和寬度的 50%。如果沒有變換，這會將元素的左上角置於其父元素的中心。
• transform:translate(-50%, -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%);
}

當您將滑鼠停留在.parent 元素上時，.child: :before 元素會向後和向上移動50%寬度和高度，顯示.child 元素的原始位置。這示範了轉換：translate(-50%, -50%) 在視覺和數學上使元素居中的效果。

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