CSS 水平垂直置中的方法 (flex, grid)

將元素置中基本上是 CSS 面試題中的基本題，面試官基本上會從面試者回答的方式和內容來判斷對於 CSS 排版的熟悉程度。但元素置中的做法其實有非常多種，不需要到每一種都要會，但建議可以熟練幾種自己最擅長的作法。

本篇文章會介紹其中五種方法。

第 1 ~ 第 4 種方法適用於，在一個容器內水平垂直置中一個 div 元素，畫面如下：
水平垂直置中一個 div 元素
第 5 種方法適用於，在一個容器內水平垂直置中一行文字，畫面如下：
水平垂直置中一行文字

CSS 水平垂直置中的 5 種方法

以下我們來看這五種方法的實作和講解：

使用 display: flex + align-items: center + justify-content: center
- 將父層元素 display 設置為 flex
- 設置 align-items 屬性為 center，表示在父層元素中將子元素垂直對齊到中間
- 設置 justify-content 屬性為 center，表示在父層元素中將剩餘空間均分在子元素的兩側，將子元素水平對齊到中間

<div class="outside">
  <div class="inside">inside</div>
</div>

.outside {
  width: 400px;
  height: 400px;
  background-color: #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
}

.inside {
  background-color: pink;
  height: 200px;
  width: 200px;
}v

使用 display: flex 和 margin: auto
- 將父層元素 display 設置為 flex
- 將子元素 margin 設置為 auto，將子元素水平垂直對齊到中間

<div class="outside">
  <div class="inside">inside</div>
</div>

.outside {
  width: 400px;
  height: 400px;
  background-color: #ccc;
  display: flex;
}

.inside {
  background-color: pink;
  height: 200px;
  width: 200px;
  margin: auto;
}

使用 display: grid + place-content: center
- 將父層元素 display 設置為 grid
- 在父層元素中使用 place-content 屬性，將其值設置為 center，它將在水平和垂直方向上置中其子元素

<div class="outside">
  <div class="inside">inside</div>
</div>

.outside {
  display: grid;
  place-content: center;
}

補充說明

place-content: center 實際上等同於同時將 grid 容器的 justify-content 和 align-content 設置為 center。 justify-content 屬性控制了水平對齊，而 align-content 屬性控制了垂直對齊。所以，通過將 justify-content 和 align-content 同時設置為 center，可以實現將 grid 容器中的所有元素都水平置中並垂直置中對齊的效果。

使用 position: absolute + top: 50% + left: 50% + transform: translate(-50%, -50%)
- 設置父層元素為 position: relative，方便計算子元素的相對位置
- 設置子元素為 position: absolute，它會相對於最近的已定位的父層元素進行定位
- 設置 top 屬性為 50%，將子元素的上邊緣移到父層元素正中間的位置
- 設置 left 屬性為 50%，將子元素的左邊緣移到父層元素正中間的位置
- 設置 transform: translate(-50%, -50%)，將子元素向左上方移動 50% 的距離，使其垂直和水平置中對齊

<div class="outside">
  <div class="inside">inside</div>
</div>

.outside {
  width: 400px;
  height: 400px;
  background-color: #ccc;
  position: relative;
}

.inside {
  background-color: pink;
  height: 200px;
  width: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

補充說明

position: absolute 的用法建議參考這篇說明。簡而言之，當一個元素的 position 設置為 absolute 時，它會相對於最近的已定位的父層元素進行定位。

而 transform: translate(-50%, -50%) 是 CSS 中的變換屬性，用於對元素進行平移。它的作用是將元素在水平方向上平移自身寬度的 50%，在垂直方向上平移自身高度的 50%。

由於我們將元素的 top 和 left 設置為 50%，元素的中心點已經在父元素的中心位置了。但是，由於元素的默認對齊方式是左上角，所以元素的左上角與父元素的中心重合。因此，我們通過使用transform: translate(-50%, -50% 將元素平移回其中心位置，從而使元素完全置中對齊。

使用 text-align: center + line-height
- 設置父層元素為 text-align: center，使文字水平置中
- 設置子層元素 line-height 與父元素同高，使文字在元素中垂直置中

<div class="outside">
  <div class="inside">inside</div>
</div>

.outside {
  width: 400px;
  height: 400px;
  background-color: #ccc;
  text-align: center;
}

.inside {
  background-color: pink;
  line-height: 400px;
}

請解釋 CSS position 有什麼值和作用？

CSS 水平垂直置中的 5 種方法

相關文章