純CSS3有什么實(shí)現(xiàn)垂直居中的新方法嗎?
網(wǎng)友解答: 利用css3實(shí)現(xiàn)垂直居中有很多方法,下面我簡(jiǎn)單的介紹幾種css3實(shí)現(xiàn)垂直居中的方法,供大家參考;flex布局利用css3的新屬性flex可以輕松實(shí)現(xiàn)垂直居中,具體方法,看下圖
利用css3實(shí)現(xiàn)垂直居中有很多方法,下面我簡(jiǎn)單的介紹幾種css3實(shí)現(xiàn)垂直居中的方法,供大家參考;
flex布局利用css3的新屬性flex可以輕松實(shí)現(xiàn)垂直居中,具體方法,看下圖代碼:
絕對(duì)定位(position)+transform利用絕對(duì)定位(position)+transform也可以實(shí)現(xiàn)垂直居中,具體實(shí)現(xiàn),看下圖代碼:
效果圖:
總結(jié):
以上兩種方法,都可以實(shí)現(xiàn)垂直居中,但是css3新屬性存在兼容性問(wèn)題,如果不考慮兼容性的話,完全可以直接使用;如果考慮兼容性,可以使用其他css方式。
如有疑問(wèn),歡迎在評(píng)論下方留言討論;喜歡的記得點(diǎn)贊+關(guān)注,為大家提供專業(yè)的前端知識(shí)