【CSS】1188- CSS 垂直居中的正确打開方式

前言之爆錘面試官神器 - CSS

無論是實際開發中，亦或者是求職面試中，css 垂直居中往往都是一個繞不開的話題，其中不乏有許多面試者在多次雙重嘗受打擊之後，而沒有一個很好的反擊點，剛好結合自己以前受的委屈和痛苦，來給大家一個錘爆面試官大佬們的機會。

其實垂直居中主要分為了兩種類型：居中元素寬高已知 和 居中元素寬高未知，那麼我們就結合這兩種類型來一一做舉例。

css 垂直居中.png

居中元素寬高已知

1. absolute + margin auto

顧名思義，就是利用目前元素的 ​

​position: absolute;​

​​ 和 ​

​margin: auto;​

​

注意使用此方法：父元素與目前元素的高度要設定；

通過将各個方向的距離都設定為 0，此時将 ​

​margin​

​​ 設定為 ​

​auto​

​，就可以實作垂直居中顯示了；

具體代碼如下：

.parent{
  position: relative;
  width: 90vw;
  height: 90vh;
  border: 3px solid steelblue;
}

.child{
  background: tomato;
  width: 50vw; height: 50vh;
  /* 核心代碼 */
  position:absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  margin: auto;
}

複制代碼      

具體效果如下：

image-20210729232149048.png

2. absolute + 負 margin

利用絕對定位百分比 50% 來實作，因為目前元素的百分比是基于相對定位（也就是父元素）來定位的;

然後再用負的 margin-top 和 margin-left 來進行簡單的位移即可，因為現在的負 margin 是基于自身的高度和寬度來進行位移的。

具體代碼如下：

.parent{
  position:relative;
  width: 90vw;
  height: 90vh;
  border: 3px solid steelblue;
}

.child{
  background: tomato;
  width: 100px; height: 100px;
  /* 核心代碼 */
  position:absolute;
  top: 50%; left: 50%;
  margin-top: -50px;
  margin-left: -50px;
}

複制代碼      

具體效果如下：

image-20210729232317142.png

3. absolute + calc

使用 CSS3 的一個計算函數來進行計算即可；方法與上面類似

具體代碼如下：

.parent{
  width: 90vw;
  height: 90vh;
  border: 3px solid steelblue;
  /* 核心代碼 */
  position:relative;
}

.child{
  background: tomato;
  width: 200px; height: 200px;
  /* 核心代碼 */
  position:absolute;
  top: calc(50% - 100px);
  left: calc(50% - 100px);
}

複制代碼      

具體效果如下：

image-20210729232434257.png

居中元素寬高未知

4. absolute + transform

利用 CSS3 的新特性 ​

​transform​

​​；因為 ​

​transform​

​​ 的 ​

​translate​

​ 屬性值如果是一個百分比，那麼這個百分比将是基于自身的寬高計算出來的。

具體代碼如下：

.parent{
  width: 90vw;
  height: 90vh;
  border: 3px solid steelblue;
  /* 核心代碼 */
  position:relative;
}

.child{
  background: tomato;
  /* 核心代碼 */
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
複制代碼      

具體效果如下：

image-20210729232624466.png

5. line-height + vertical-align

把目前元素設定為行内元素，然後通過設定父元素的 ​

​text-align: center;​

​ 實作水準居中；

同時通過設定目前元素的 ​

​vertical-align: middle;​

​ 來實作垂直居中；

最後設定目前元素的 ​

​line-height: initial;​

​​ 來繼承父元素的​

​line-height​

​。

具體代碼如下：

.parent{
  width: 90vw;
  border: 3px solid steelblue;
  /* 核心代碼 */
  line-height: 500px;
  text-align: center;
}

.child{
  background: tomato;
  /* 核心代碼 */
  display: inline-block;
  vertical-align: middle;
  line-height: initial;
}
複制代碼      

具體效果如下：

image-20210729232748854.png

6. table 表格元素

通過最經典的 table 元素來進行水準垂直居中，不過代碼看起來會很備援，不推薦使用；

具體代碼如下：

<table>
  <tbody>
    <tr>
      <td class="parent">
        <div class="child"></div>
      </td>
    </tr>
  </tbody>
</table>

<style>
  .parent {
    width: 90vw;
    height: 90vh;
    border: 3px solid steelblue;
    /* 核心代碼 */
    text-align: center;
  }
  .child {
    background: tomato;
    /* 核心代碼 */
    display: inline-block;
  }
</style>
複制代碼      

具體效果如下：

image-20210729233002861.png

7. css-table 表格樣式

如果一定要使用 ​

​table​

​​ 的特性，但是不想寫 ​

​table​

​​ 元素的話，那麼​

​css-table​

​ 就很适合你；

具體代碼如下：

.parent{
  width: 90vw;
  height: 90vh;
  border: 3px solid steelblue;
  /* 核心代碼 */
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.child{
  background: tomato;
  /* 核心代碼 */
  display: inline-block;
}
複制代碼      

具體效果如下：

image-20210729233055305.png

8. flex 布局（一）

要說現在較為流行和使用較多的布局方案，那麼非 flex 莫屬了，那麼舉例兩個最常見的使用方式 ~

直接在 ​

​flex-container​

​ 上通過幾行代碼即可很優雅的實作

具體代碼如下：

.parent {
  width: 90vw;
  height: 90vh;
  border: 3px solid steelblue;
  
  /* 核心代碼 */
  display: flex;
  justify-content: center;
 align-items: center;
}
.child{
  background: tomato;
}
複制代碼      

​

​justify-content​

​ 表示：設定或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式；

​

​align-items​

​ 表示：定義 flex 子項在 flex 容器的目前行的側軸（縱軸）方向上的對齊方式。

具體效果如下：

image-20210729233155581.png

9. flex + margin auto（二）

在 ​

​flex-item​

​ 上更加優雅的實作

具體代碼如下：

.parent{
  width: 90vw;
  height: 90vh;
  border: 3px solid steelblue;
  
  /* 核心代碼 */
  display: flex;
}

.child{
  background: tomato;
  
  /* 核心代碼 */
  margin: auto;
}
複制代碼      

具體效果如下：

image-20210729233243684.png

flex 的兩種方法使用取舍，任憑您意

附贈 flex 相容性圖檔一張

image-20210725020146492.png

10. grid 網格布局 (一)

grid 布局相信大家在實際項目中用的較少，主要是該布局實在是太超前，導緻了相容性不是那麼理想，但是不可否認的是 grid 的能力在 css 布局中絕對是一個質的飛越。

不熟悉的可以看下阮一峰老師的詳細入門教程[1]

​

​CSS Grid​

​​ 包含與 ​

​Flexbox​

​​ 幾乎相同的對齊選項，是以我們可以在 ​

​grid-container​

​ 上優雅的實作

具體代碼如下：

.parent{
  width: 90vw;
  height: 90vh;
  border: 3px solid steelblue;
  /* 核心代碼 */
  display: grid;
  align-items: center;
  justify-content: center;
}

.child{
  background: tomato;  
}
複制代碼      

具體效果如下：

image-20210729233416689.png

11. grid 網格布局 (二)

同樣我們可以像 ​

​Flexbox​

​​ 一樣，在 ​

​grid-item​

​ 上優雅的實作

具體代碼如下：

.parent{
  width: 90vw;
  height: 90vh;
  border: 3px solid steelblue;
  /* 核心代碼 */
  display: grid
}

.child{
  background: tomato;
  /* 核心代碼 */
  align-self: center;
  justify-self: center;
}
複制代碼      

具體效果如下：

image-20210729233458535.png

flex 的兩種方法使用取舍，任憑您高興

附贈 grid 相容性圖檔一張

image-20210725020025034.png

總結

在學習了上面的 11 種垂直居中布局方法後，我們簡單概括一下

• 如果你的項目在 PC 端有相容性要求并且寬高固定，推薦使用 ​

  ​absolute + 負 margin​

  ​ 方法實作；
• 如果你的項目在 PC 端有相容性要求并且寬高不固定，推薦使用 ​

  ​css-table​

  ​ 方式實作；
• 如果你的項目在 PC 端無相容性要求 ，推薦使用 ​

  ​flex​

  ​ 實作居中，當然不考慮 IE 的話，​

  ​grid​

  ​ 也是個不錯的選擇；
• 如果你的項目在移動端使用 ，那麼推薦你使用 ​

  ​flex​

  ​ ，​

  ​grid​

  ​ 也可作為備選。

寫在最後

其實以上的是一種垂直居中方法，隻是比較常見的，其實還有一些比較冷門的方式方法，例如 僞類元素、grid-container 的 grid-template-rows 等，大家下去可以自行嘗試一下 ~

周末已結束，周一還會遠嗎，祝大家新的一周新的開始 ~

帥氣美麗的你給個贊呗再走呗 ~

關于本文

作者：‍易師傅​