在說垂直居中之前先看一下水平居中，相對於垂直居中來說水平居中就簡單多了：

       如果是一個行內元素，就對它的父級直接使用text-align: center;

       如果是一個塊級元素，就對它自身使用margin: auto;

說完水平居中再來看垂直居中，這裡講述三種常見的方法：

1.基於絕對定位（要求元素具有固定的寬度和高度）

藉助calc()函式，可以簡化以上程式碼：

這個方法最大的侷限在於它要求元素的寬高是固定的。

當在translate()變形函式中使用百分比值時，是以這個元素自身的寬度和高度為基準進行換算和移動的，這樣就可以解除對固定尺寸的依賴。

2.基於viewport

不使用絕對定位，仍然採用translate()變形函式，把元素相對於視口進行居中。先來了解一下幾個相關單位

vh：相對於視口的高度。視口被均分為100單位的vh

vw：相對於視口的寬度。視口被均分為100單位的vw

vmin：相對於視口的寬度或高度中較小的那個。其中最小的那個被均分為100單位的vmin

vmax：相對於視口的寬度或高度中較大的那個。其中最大的那個被均分為100單位的vmax

只適用於在視口中居中的場景

3.基於Flexbox

這是最佳方案

我們只需要給出兩句宣告即可：

先給父元素設定diaplay:flex;

再給元素自身設定magin:auto;