CSS垂直居中的几种方式

• absolute and -margin 需要设置盒子的宽度和高度

.father{
  border:1px solid red;
  width: 80vh;
  height: 90vh;
  position:relative;
}
.box{
  border:1px solid green;
  width: 100px;
  height: 100px;
  position:absolute;
  top:50%;
  left:50%;
  margin-left:-50px;
  margin-top:-50px;
}

• absolute and margin 需要设置盒子的宽度和高度

  .father{
    border:1px solid red;
    width: 80vh;
    height: 90vh;
    position:relative;
  }
  .box{
    border:1px solid green;
    width: 100px;
    height: 100px;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
  }
  

  • absolute and transform

    .father{
      border:1px solid red;
      width: 80vh;
      height: 90vh;
      position:relative;
    }
    .box{
      border:1px solid green;
      width: 100px;
      height: 100px;
      position:absolute;
      top:50%;
      left:50%;
       transform : translate(-50%,-50%)
    }
    

    • flex

      .father{
        border:1px solid red;
        width: 80vh;
        height: 90vh;
        display:flex;
        justify-content:center;
        align-items:center;
      }
      .box{
        border:1px solid green;
      }
      
      

    • grid 和flex 一样，不过grid的兼容性不太好

      		.father{
        border:1px solid red;
        width: 80vh;
        height: 90vh;
        display:grid;
        justify-content:center;
        align-items:center;
      }
      .box{
        border:1px solid green;
      }