css button居中样式,CSS样式：如何用flex布局优化这个登录框居中

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

background-image: url('./img/login_bg.jpg');

width: 100%;

height: 100%;

}

.section {

background: url('./img/login_main.png') no-repeat center top;

height: 800px;

width: 100%;

}

.login-title {

margin-top: 80px;

background: url(./img/login_title.png) no-repeat center top;

width: 100%;

height: 80px;

}

.title {

color: white;

margin-top: 100px

}

.all {

display: flex;

justify-content: center;

align-items: center;

text-align: center;

}

.nav {

margin-top: 220px;

display: flex;

position: absolute;

}

.login{

margin: 0 20px;

color: white;

}

.contentbox{

display: flex;

}

全新LIMS实验室的人、机、法、料、环的全过程闭环管理

用户名密码登陆

加密狗登陆

登  陆

现在的布局有点乱 要想让登录的form居中 貌似还得使用绝对布局 想要flex优化 不知道该怎么改

想要实现的效果如下