弹性布局水平垂直居中

知识点
justify-content: center//子项在flex容器水平居中
align-items: center//子项在flex容器垂直居中

代码块

.main{
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.maincon{
    width:400px; 
    height:200px; 
    background: #314057;
}