常见的盒子垂直居中的方法

1. 利用定位+calc

     * {
             padding: 0;
             margin: 0;
         }
     
     .box {
             width: 200px;
             height: 200px;
             background: red;
             position: fixed;
             top: calc(50% - 100px);
             left: calc(50% - 100px);
             text-align: center;
         }
   

     <div class="box">
     </div>
   

2. flex布局

   * {
       padding: 0;
       margin: 0;
   } 
   .box{
       width: 100vw;
       height: 100vh;
       display: flex;
       justify-content: center;
       align-items: center;
   }
   .item{
       width: 200px;
       height: 200px;
       background: red;
   }
   

   <div class="box">
       <div class="item">
       </div>
   </div>
   

3. 利用定位+margin

   * {
       padding: 0;
       margin: 0;
   }
   
   .box {
       width: 100vw;
       height: 100vh;
       position: relative;
   }
   .item {
       width: 200px;
       height: 200px;
       background: red;
       position: absolute;
       top: 0;
       left: 0;
       bottom: 0;
       right: 0;
       margin: auto;
   }
   

   <div class="box">
       <div class="item">
       </div>
   </div>
   

4. transform

   *{
   margin:0;
   padding:0;
   }
   
   .box {
       width: 100vw;
       height: 100vh;
       position: relative;
   }
   
   .item {
       width: 200px;
       height: 200px;
       background: red;
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
   }
   

   <div class="box">
       <div class="item">
       </div>
   </div>
   

5. tabel布局

   .box{
       display: table-cell;
       width: 100vw;
       height: 100vh;
       vertical-align: middle;
       text-align: center;
   }
   .item{
       display: inline-block;
       width: 200px;
       height: 200px;
       background: red;
   }
   

   <div class="box">
       <div class="item">
       </div>
   </div>
   

6. grid布局

   .box { 
   width: 100vw;
   height: 100vh;
   display: grid;
   place-items: center;
   }
   .item{
       width: 200px;
       height: 200px;
       background: red;
   }
   

   <div class="box">
       <div class="item">
       </div>
   </div>