css使用flex實現垂直居中

css使用flex實現垂直居中

1.開發環境vue+ts+element
2.電腦系統 windows10 專業版
3.在開發的過程當中,咱們通常都會遇到實現垂直居中,其實有不少方法,在這裏我選擇的是:使用css中的flex實現,方法以下:

在子元素中添加以下代碼:
display:flex; align-items:center;/*垂直居中*/ 
justify-content: center;/*水平居中*/ 
width:100%; 
height:100%;

4.接下啦,你就對看到子元素在父元素中垂直居中了。
5.本期的教程到了這裏就結束啦,讓咱們一塊兒努力走向巔峯!