登录页面登录框居中

<section class="HolyGrail">
    <header>头部...</header>
    <div class="HolyGrail-body" style="background:url('static/images/back.jpg') no-repeat center center;
  background-size:100% 100%;">
      <div>内容内容内容内容内容内容</div>
    </div>
    <footer>底部。。。</footer>
  </section>

*{margin:0;padding:0}
.HolyGrail {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
header, footer {
  height:80px;
  line-height: 80px;
  text-align:center;
  background-color:#000;
  color:#fff;
}
.HolyGrail-body {
  display: flex;
  flex: 1;
  align-items: center;
}
.HolyGrail-body div{
  padding:35px 40px;
  margin:auto;
  border-radius:6px;
  background-color:rgba(255,235,255,0.6);
}
@media (max-width: 768px) {
  .HolyGrail-body {
    flex-direction: column;
    flex: 1;
  }
  .HolyGrail-nav,
  .HolyGrail-ads,
  .HolyGrail-content {
    flex: auto;
  }
}

 

转载于:https://www.cnblogs.com/linjiu0505/p/10579261.html