CSS垂直居中的三種方式
阿新 • • 發佈:2019-01-04
在說垂直居中之前先看一下水平居中,相對於垂直居中來說水平居中就簡單多了:
如果是一個行內元素,就對它的父級直接使用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;