常見的垂直置中方法

1.使用 vertical-align（適用於 inline 或 inline-block 元素）

適用情境：

  • 只能用於行內元素（如 <span>、<img>）。
  • 必須確保父元素有適當的line-height。
div {
  height: 100px;
  border: 1px solid black;
  line-height: 100px; /* 確保文本基線與容器高度一致 */
}
span, img {
  vertical-align: middle; /* 將行內元素的基線與容器的中線對齊 */
}
注意：vertical-align: middle; 並不是真的「垂直置中」，而是讓元素的基線與容器中線對齊，因此有時仍需微調 line-height 或 display: inline-block;。

2.使用 line-height（適用於單行文字）

適用情境：

  • 只適用於單行文本，不適用於多行。
  • 讓 line-height 等於 height，文字就會置中。
div {
  height: 100px;
  line-height: 100px; /* 讓文字基線與容器高度一致 */
  text-align: center;
  border: 1px solid black;
}

這種方法很簡單，但如果有多行文字，就會變得不實用。

3.使用 display: flex;（適用於所有元素，最推薦）

適用情境：

  • 適用於區塊級（block）元素，不論是單個元素或多個元素都有效。
  • 現代 CSS 最推薦的方式。
div {
  display: flex;
  align-items: center; /* 垂直置中 */
  justify-content: center; /* 水平置中 */
  height: 100px;
  border: 1px solid black;
}

這種方法最通用，適用於任何情境。

4.使用 display: grid;（適用於所有元素）

適用情境：

  • 適用於區塊級（block）元素，可搭配 place-items: center; 一行搞定。
  • 適合需要更複雜的版面配置。
div {
  display: grid;
  place-items: center; /* 相當於 align-items 和 justify-items 都是 center */
  height: 100px;
  border: 1px solid black;
}

這種方式比 flexbox 更簡潔，特別適合 單一元素 的置中需求。

5.使用 position: absolute; + transform（適用於固定大小元素）

適用情境：

  • 適用於區塊元素，但元素的大小必須可知（例如 width、height 固定）。
  • 需要手動調整 top 和 left。 
div {
  position: relative;
  height: 100px;
  border: 1px solid black;
}
span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 讓元素的中心點對齊父容器的中心 */
}

這種方法適用於 絕對定位元素，但如果元素大小變動，可能會出現問題。

6.使用 table 相關屬性（老舊方式，不推薦）

適用情境：

  • 來自早期網頁設計，現在已經被 flexbox 和 grid 取代，但在某些情境下仍可用。
div {
  display: table;
  width: 100%;
  height: 100px;
  border: 1px solid black;
}
span {
  display: table-cell;
  vertical-align: middle; /* 讓表格的內容垂直置中 */
  text-align: center;
}

不推薦 這種方式，因為 display: table; 會影響其他佈局需求，較不靈活。