[前端]flex布局中设置水平和垂直居中

当采用flex布局的时候，设置水平和垂直居中很容易。
没有设置的时候

当我们设置如下代码后

.web-login-content .content-wrapper .login-wrapper .content .content-form .password-wrapper .icon-password,
.web-login-content .content-wrapper .login-wrapper .content .content-form .username-wrapper .icon-username {
    /* margin-top: 10px; */
    flex: 40px 0 0;
    width: 38px;
    height: 38px;
    display: flex;
    /* 水平和垂直居中 */
    justify-content: center;
    align-items: center;
    border: 1px solid rgba(7, 17, 27, 0.5);
    font-size: 24px;
}