工作原理拆解

第一步：left: 50%

.child {
  left: 50%;
}

• 將子元素的左邊緣定位到父元素的中心點
• 此時子元素的左邊緣在父元素的中間位置
• 問題：整個子元素是偏右的，因為只有左邊緣居中

第二步：transform: translateX(-50%)

.child {
  left: 50%;
  transform: translateX(-50%);
}

• translateX(-50%) 中的百分比是相對於元素自身的寬度
• 將子元素向左移動自身寬度的50%
• 這樣，子元素的中心點就對齊到了父元素的中心點

視覺演示

父元素 [         |         ]
           中心點
           
步驟1：left: 50%
[子元素    ]   // 子元素左邊緣在中心點，整個偏右

步驟2：translateX(-50%)
   [子元素    ]  // 向左移動自身寬度的一半，現在居中了

數學計算示例

假設：

• 父元素寬度：400px
• 子元素寬度：200px

1. left: 50%

• 父元素中心點：400px × 50% = 200px
• 子元素左邊緣在200px位置
• 子元素右邊緣在400px位置（200px + 200px）

2. transform: translateX(-50%)

• 向左移動：200px × 50% = 100px
• 最終位置：子元素左邊緣在100px，右邊緣在300px
• 中心點：(100px + 300px) ÷ 2 = 200px ✅ 正好是父元素中心

為什麼這種方法很實用？

優點：

1. 不需要知道子元素寬度 - 自動計算50%
2. 響應式友好 - 適應各種屏幕尺寸
3. 簡單易記 - 只需兩行CSS
4. 兼容性好 - 支持現代瀏覽器

垂直居中同理：

.child {
  top: 50%;
  transform: translateY(-50%);
}

水平和垂直同時居中：

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

與其他方法的對比

實際應用示例

/* 彈出框居中 */
.modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
}

/* 工具提示居中 */
.tooltip {
  position: absolute;
  left: 50%;
  bottom: 100%; /* 在元素上方 */
  transform: translateX(-50%);
}

注意事項

1. transform可能影響z-index - 在某些情況下會創建新的堆疊上下文
2. 性能考慮 - transform有硬件加速，通常性能很好
3. 與動畫結合 - transform適合與CSS動畫配合使用

這種方法的巧妙之處在於利用了相對定位和transform各自的特點：相對定位基於父元素計算，而transform基於元素自身計算，兩者結合就實現了完美的居中效果。