login

实现登陆界面垂直水平居中

1、实现div的垂直水平居中,可以作为登录界面。
2、图片可以根据需求放置登陆图标
3、底部根据需求放置一些图标以及描述文本
4、

<style> 
    .full-height {
       height: 100%;
  }
  .gutter-box {
    padding: 5px 0;
    height: 500px; 
    position: relative;
    top: 15%;
   <!-- border:1px solid grey;-->
  }
  .login-box{
    height: 400px;
    min-width: 300px;
    width: 30%;
    background-color: rgba(255, 255, 255, 0.9);
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-radius: 0px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.349019607843137);
    position: relative;
    top: 15%; 
    text-align: center;
    padding-top: 6%;
    /* 居中 */
    margin: 0 auto;
    border-color: rgba(233, 233, 233, 1);
  }
  .image{
      width:60px;
      height:60px;
      line-height:60px;
      border:1px solid grey;
      border-radius:50%;
      text-align:center;
      position:relative;
      left:40%;
  }
  .height{
      height:20px;
      clear:both;
  }
  .login input{
      height:30px;
      width:200px;
     <!-- border-radius:1px;-->
  }
  .login-remember{
      float:left;
      position:relative;
      left:44px;
  }
  .login-button button{
      height:35px;
      width:207px;
      background-color:#0069ff;
      border-radius:5px;
      color:#ffffff;
      font-size:15px;
  }
  .login-footer{
     position:fixed;
     height:80px;
     width:90%;
     margin: 0 auto;
     text-align:center;
     line-height:80px;
     border:1px solid grey;
     bottom:5px;
  }
  .login-footer img{
     height:50px;
     width:50px;
  }
</style>

<div class='full-height' id="wrapper">
   <div class='gutter-box' style={{minWidth: '290px'}}>
       <div class='login-box'>
            <div class='image'>图片</div>
            <div class='height'></div>
            <div class='height'></div>
            <div class='height'></div>
            <div class='login'>
                <input placeholder='请输入登录账号'/>
            <div class='height'></div>
                <input placeholder='请输入登录密码' />
            </div>
            <div class='height'></div>
            <div class='login-remember'><input type='checkbox' /> 记住登录</div>
            <div class='height'></div>
            <div class='login-button'><button>登录</button></div>
       </div>
       <div class='login-footer'>
          <span>登陆界面的一些描述<span>
       </div>
   </div>
</div>