实现垂直居中的五种方法

实现垂直居中的几种方法（分场景介绍）

1. line-height （包裹行内元素）

   <div class="wrap">
       123456788
   </div>
   <div class="wrap">
       <span class="child">12345555</span>
   </div>
   
   .wrap {
      height: 100px;
      line-height: 100px;
   }

   效果图

   

2. vertical-align: middle （包裹行内块级元素）

     <div class="wrap">
         <span class="child"></span>
         <span class="child"></span>
     </div>
     
     .wrap {
          height: 100px;
          border: 1px solid #000;
          margin-bottom: 10px;
      }
      .child {
          border: 1px solid red;
          height: 50px;
          width: 200px;
      }
   
      .wrap::after, .child {
          display: inline-block;
          vertical-align: middle;
      }
      .wrap::after {
          content: '';
          height: 100%;
      }
     

   效果图
   

3. flex结构 align-items

      <div class="wrap">
          <div class="child">block</div>
          <span class="child inline-block">inline-block</span>
          <span class="child">inline</span>
      </div>
      .wrap {
          display: flex;
          align-items: center;
          height: 100px;
          border: 1px solid #000;
          margin-bottom: 10px;
      }
      .child {
          border: 1px solid red;
          height: 50px;
          width: 200px;
      }
      .inline-block {
          display: inline-block;
          height: 30px;
      }

   效果图
   

4. position + transform

   <div class="wrap">
       <div class="child">block</div>
   </div>
   .wrap {
       position: relative;
   }
   .child {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
   }
   

5. table table-ceil

   <div class="wrap">

       <div class="child">table-ceil</div>
       <div>block</div>
   </div>
   .wrap {
       display: table;
   }
   .child {
       display: table-cell;
       width: 500px;
       vertical-align: middle;
   }
   

   

   注：容器height/width 若wrap 设置了height/width, 再设置child的height/width无效，即 child会自动填满wrap的高宽；若wrap 未设置height/width，则wrap自适应child的实际宽高