水平置中看似基礎，但選錯方法往往要多加幾行補丁才能修正。以下五種寫法各有適用條件，選之前先確認目標元素是行內還是區塊、有無固定寬度、父容器是否允許改動。

1. text-align: center

作用在父容器，讓其中的行內元素或行內區塊元素水平置中。

1
2
3
.parent {
  text-align: center;
}

文字、<span>、<img>、display: inline-block 的元素都吃這個規則；display: block 的子元素不受影響。如果要置中的是區塊元素，這條沒用。

2. margin: auto

把區塊元素的左右邊距都設為 auto，瀏覽器會平均分配剩餘空間。

1
2
3
4
.child {
  width: 300px;
  margin: 0 auto;
}

不想寫死寬度的話，可以用 width: fit-content，寬度跟著內容走，同樣能置中：

1
2
3
4
.child {
  width: fit-content;
  margin: 0 auto;
}

兩種寫法的前提一樣：元素必須是區塊元素，且寬度小於父容器。行內元素不適用。

3. Flexbox

把父容器設為 flex container，再用 justify-content 控制主軸（預設橫向）的排列。

1
2
3
4
.parent {
  display: flex;
  justify-content: center;
}

子元素不需要指定寬度，也不需要知道自己的尺寸。要同時垂直置中就加 align-items: center。Flexbox 是一維佈局工具，處理單行或單列排列是它的強項；現代瀏覽器全面支援，不需要擔心相容性問題。

4. Grid

把父容器設為 grid container，justify-content: center 會讓整個 grid 在父容器中水平置中：

1
2
3
4
.parent {
  display: grid;
  justify-content: center;
}

如果只有一個子元素，用 place-items: center 更簡潔（同時處理水平與垂直）；或是在子元素上設 margin: auto，Grid 子元素的 margin: auto 會吃掉剩餘空間：

1
2
3
4
/* 子元素自己置中 */
.child {
  margin: auto;
}

Grid 的核心優勢是二維佈局（同時控制行與列）。單純做水平置中的話，Flexbox 語意更直觀；需要同時管理行列結構時才值得拉 Grid 進來。

5. 絕對定位加 transform

父容器設相對定位，子元素用絕對定位推到 50% 再用 translateX 拉回自身一半寬度：

1
2
3
4
5
6
7
8
.parent {
  position: relative;
}
.child {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

子元素會脫離正常文件流，不佔據原本的空間，父容器高度也不會被它撐開。這個寫法的使用場景通常是 overlay、tooltip 或需要精確定位的浮層元件，而不是一般的內容置中。程式碼本身不複雜，但副作用（脫離文件流）是要留意的地方。

選哪個

情境 建議
行內元素、文字置中 text-align: center
區塊元素、寬度已知或用 fit-content margin: auto
一般元件置中，不需管垂直 Flexbox justify-content: center
要同時處理水平垂直、或二維格線佈局 Grid
浮層、overlay、需脫離文件流 絕對定位 + translateX(-50%)