CSS垂直居中总结

前言

在平时开发过程中，经常会遇到各种状况下的垂直居中问题。在这里主要做下总结，比较下在不同情境下的差异，以及各种写法的优缺点，纯基础。

文字的垂直居中

• 单行文字

  如果一个容器中，只有一行文字对它实现垂直居中，比较简单，只需要将line-height 和height设置为相等即可。

  .text{
      height：20px;
      line-height:20px;
      text-align:center;
  }
  

• 多行文字 未知高度的文字，垂直居中，可以使用设置padding的方式。

  .text{
      padding:10px;
  }
  

• 固定高度，文字垂直居中 可以通过模拟table的方式。使用css的垂直属性vertical-align:middle,因此需要外加一层容器，模拟表格单元格的方式实现。

  .wrap{
      display:table;
      height:200px;
  }
  .text{
      display:table-cell;
      vertical-algin:middle;
      
  }
  <div class="wrap">
       <div class="text">
       垂直居中@
       </div>
  </div>
  

容器的垂直居中

• 固定宽高的容器

  1.绝对定位和负边距

  .wrap{
     position:relative;
  }
  .text{
      position: absolute;
      width:100px;
      height: 50px;
      top:50%;
      left:50%;
      margin-left:-50px; //容器自身宽度的一半
      margin-top:-25px;  //容器自身高度的一半
      text-align: center;
  }
  <div class="wrap">
      <div class="text">
      垂直居中@
      </div>
  </div>
  

  2.绝对定位和translate,此方式同理于方式1，可以使用translate属性，对容器的位置做调整，此属性的参数，50%，是相对于容器本身的宽高来计算的。

  .wrap{
     position:relative;
  }
  .text{
      position: absolute;
      width:100px;
      height: 50px;
      top:50%;
      left:50%;
      transform:translate(-50%,-50%);
      text-align: center;
  }
  <div class="wrap">
      <div class="text">
      垂直居中@
      </div>
  </div>
  

  3.绝对定位和0

  .wrap{
    position:relative;
  }
  .text{
     position: absolute;
     width:100px;
     height: 50px;
     left：0；
     right：0；
     bottom：0；
     top:0;
     margin:auto;
  }
  <div class="wrap">
     <div class="text">
     垂直居中@
     </div>
  </div>
  

• 未知宽高的容器垂直居中

flex垂直居中，适合以上各种场景，

  .wrap{
       display:flex;
       justiify-content:center;
       align-items:center;
    }
   .text{
        
   }
   <div class="wrap">
        <div class="text">
        垂直居中@
        </div>
   </div>