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.本期的教程到了这里就结束啦,让咱们一块儿努力走向巅峰!