無論是實際開發中，亦或者是求職面試中，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.png2. 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.png3. 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.png5. 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.png6. 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.png7. 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.png8. 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.png9. flex + margin auto（二）在 flex-item 上更加優雅的實現
具體代碼如下：.parent{
width: 90vw;
height: 90vh;
border: 3px solid steelblue;
/* 核心代碼 */
display: flex;
}
.child{
background: tomato;
/* 核心代碼 */
margin: auto;
}
複製代碼
具體效果如下：image-20210729233243684.pngflex 的兩種方法使用取捨，任憑您意
附贈 flex 兼容性圖片一張image-20210725020146492.png10. 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.png11. 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.pngflex 的兩種方法使用取捨，任憑您高興
附贈 grid 兼容性圖片一張image-20210725020025034.png總結在學習了上面的 11 種垂直居中布局方法後，我們簡單概括一下
如果你的項目在 PC 端有兼容性要求並且寬高固定，推薦使用 absolute + 負 margin 方法實現；如果你的項目在 PC 端有兼容性要求並且寬高不固定，推薦使用 css-table 方式實現；如果你的項目在 PC 端無兼容性要求 ，推薦使用 flex 實現居中，當然不考慮 IE 的話，grid 也是個不錯的選擇；如果你的項目在移動端使用 ，那麼推薦你使用 flex ，grid 也可作為備選。寫在最後其實以上的是一種垂直居中方法，只是比較常見的，其實還有一些比較冷門的方式方法，例如 偽類元素、grid-container 的 grid-template-rows 等，大家下去可以自行嘗試一下 ~
周末已結束，周一還會遠嗎，祝大家新的一周新的開始 ~
帥氣美麗的你給個讚唄再走唄 ~