<style>
    * {
      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;
    }
  </style>

<div class="section">
    <div class="all">
      <div class="login-title">
        <div class="title">全新LIMS实验室的人、机、法、料、环的全过程闭环管理</div>
      </div>
      <div class="nav">
        <a class="login on"><img src='./img/btn_user.png' width="110px" height="100px">
          <div>用户名密码登陆</div>
        </a>
        <a class="login"><img src='./img/btn_jmg.png'>
          <div>加密狗登陆</div>
        </a>
      </div>
      <div class="contentbox">
          <div class="box active">
              <div class="cont-1">
                  <input class="icon email" name="txt" type="text" placeholder="邮箱">
                  <input class="icon password" name="psd" type="password" placeholder="密码">                
                  <button class="btn">登&nbsp;&nbsp;陆</button>
                
              </div>
          </div>
      </div>
    </div>
  </div>

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

想要实现的效果如下