CSS居中對齊終極指南

前端新世界 發表於 2021-07-26

本文首發於我的公眾號:前端新世界
歡迎關注

本文將討論可用於居中對齊元素的6種CSS技術(按照最佳實踐排序),以及每一種技術最適合應用的場景。這裡,居中對齊指的是將元素放置在其父元素的水平和垂直中心。

.center類代表要居中對齊的元素

.parent類代表其父元素。

1. 使用變換(Transform)

什麼時候用:

  • 當元素的寬度和高度未知時;
  • 卡片式彈出框中有多個子元素,其中一個焦點元素位於中心。

這個思路是使用絕對定位——topleft 50%,然後應用負變換。topleft中使用的值根據父元素的尺寸解析,而translate方法中的值根據元素本身的尺寸解析。

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

2. 使用Flex

什麼時候用:

  • 當有一個或多個元素要居中時;
  • 當子元素是動態的並且大小未知時;
  • 當有一行專案需要像頁尾一樣居中時。

這個思路是使父容器成為flexbox並使用flex屬性將元素沿水平和垂直方向居中,如下所示。

.parent {
    display: flex;
    justify-content: center; 
    align-items: center;
}

當有多個元素需要一個在另一個元素上方堆疊,並使該元素堆疊在其中心時,我們只需新增以下程式碼行:

flex-direction: column; 

3. 使用負邊距

什麼時候用:

  • 當元素的高度和寬度已知時。

這個思路是再次使用類似於變換技術的絕對定位,但應用的是元素寬度和高度一半的負邊距而不是平移。

$w: 200px; /* SCSS 變數 */
$h: 100px; /* SCSS 變數 */
.center {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -50px -100px; /* Negative margin of half the 
                          width and heigh */t

}

為了使這段程式碼更通用,我們使用calc()屬性,如下所示:

(#{$h} / 2) - 一半高度

(#{$h} / 2) * -1) - 一半高度的負值

這樣就可以:

margin: calc((#{$h} / 2) * -1) calc((#{$w} / 2) * -1); 

4. 使用網格(Grid)

什麼時候用:

  • 當只有一個子元素需要居中時。

這個思路是建立一個網格容器並將邊距設定為auto。在非網格容器中,當margin設定為auto時,margin-topbottom取值為0。

但是,在網格容器中,margin-topbottom平均分配可用空間,從而使元素居中。

.parent {
  display: grid;
}
.center {
  margin: auto;
}

另一種使用網格來實現居中的方法是:

.parent {
  display: grid;
  place-items: center;
}

5. 使用填充(Padding)

不建議將此技術用於中心對齊,但它也是可行的。

什麼時候用:

  • 當父元素的高度已知或者固定時;
  • 當中心元素的高度為彈性可變時。

這個思路是為已知固定高度的容器設定固定的垂直填充,並允許子元素佔據最大高度和自動邊距。

.parent {
  height: 600px; //Fixed height
  padding: 200px 0; //Fixed vertical padding
}
.center{
  margin: 0 auto;
  height: 100%; // Child takes max height
}

6. 使用表格單元格

這個技術現在用得比較少,但是也值得借鑑。並且,它確實也是可行的。

這個思路是使用display強制父級表現得像一個表格單元格。然後使用vertical align屬性進行垂直居中,使用margin auto進行水平居中。

.parent {
  display: table-cell;
  vertical-align: middle;
}
.center{
  margin: auto;
}

以上總結了居中對齊元素的6種方法。

另外我們再講一講——水平居中

水平居中通常用於標題樣式和頁尾,並結合均勻的填充或邊距。

使用文字對齊

什麼時候用:

  • 當中心元素為文字內容或者inline-*型別元素時;
  • linline-*包括inlineinline-blockinline-flexinline-table等。
.parent {
   text-align: center;
}

它還可以居中塊型別子元素,但我們不推薦這麼做。

使用邊距

什麼時候用:

  • 當中心元素是塊元素時
.center {
    margin: 0 auto;
}

感謝閱讀!

每日分享前端外掛和前端開發教程,歡迎掃碼關注我的公眾號:前端新世界

CSS居中對齊終極指南