css水平垂直居中

水平垂直居中方案(亲测有效)

• 方案一：

  • flex布局
    • 1.需要设置form的父元素.form-box的display: flex; justify-content: center; align-items: center;
    • 2..form宽度固定 高度自适应，form-item随意增加都能自适应的高度垂直居中；

  /* login背景图 */
     .login {
       width: 100%;
       height: 100%;
       position: fixed;
       /* background-color: coral; */
       background: url('../static/bg.jpeg');
       background-size: cover;
     }
     /* form的父元素 */
     .form-box {
       display: flex;
       /* background-color: coral; */
       width: 100%;
       height: 100%;
       justify-content: center;
       align-items: center;
     }
     /* form表单 */
     .login-form{
       background-color: #ddd;
       width: 360px;
       padding: 22px 22px 0 22px;
       border-radius: 5px;
     }
  

• 方案二：最优

  • 父元素position:relative,子元素absolute,transform
    • 优点：只需要设置form的父元素宽度固定，form-item随意增加都能自适应的高度垂直居中；

// login背景图
.login {
 width: 100%;
 height: 100%;
 position: fixed;
 /* background-color: coral; */
 background: url('../static/bg.jpeg');
 background-size: cover;
}
// 设置el-form的父元素 .form-box的div
.form-box {
 position: absolute;
 width: 360px;
 padding: 22px 22px 0 22px;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 background-color: #ddd;
 border-radius: 5px;
}

• 方案三：
  • 利用calc()动态计算top、left的距离
    • 缺点：需要设置form父元素固定的宽高

  // login背景图
  .login {
     width: 100%;
     height: 100%;
     position: fixed;
     /* background-color: coral; */
     background: url('../static/bg.jpeg');
     background-size: cover;
   }
   // 设置el-form的父元素 .form-box的div
   .form-box {
     position: absolute;
     width: 360px;
     height: 126px;
     padding: 22px 22px 0 22px;
     background-color: #ddd;
     border-radius: 5px;
     left: calc(50% - 180px);
     top: calc(50% - 63px);
   }