当前位置： 移动技术网 > IT编程>网页制作>CSS > 登录页面登录框居中

登录页面登录框居中

2019年03月23日  | 移动技术网IT编程  | 我要评论 
<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>
.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;
  }
}

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网