• 假如父容器的高度由內(nèi)容撐開，可以設(shè)置上下 padding 一樣來達到垂直居中的效果
  代碼

  padding-top: 40px;
  padding-bottom: 40px;

• 假如父容器的高度是確定的，可以添加一個偽元素.middle::before，
  構(gòu)造一個高度撐滿父容器，垂直居中的元素，對它垂直居中，那么就是對父容器垂直居中了。
  優(yōu)點：安全無副作用，居家旅行垂直居中必備良藥。
  缺點：IE6~8 不支持偽元素，無法使用。
  代碼

 .middle:before {
      content: "";
      display: inline-block;
      height: 100%;
      vertical-align: middle; 
} 

• 假如父容器的高度是確定的，可以將父容器的 display 屬性設(shè)置成 table-cell，再添加 vertical-align: middle;來達到垂直居中的效果，
  優(yōu)點：簡單方便。
  缺點：這樣改變了父容器的display屬性，可能會有副作用，而且IE6、IE7不支持display: table-cell,IE8 及以后的版本才能用。
  代碼

.middle {
      display: table-cell;
      vertical-align: middle;
}

• 假如父容器的寬高是確定的，就可以用絕對定位來達到居中的效果。
  代碼

.middle {
      position: absolute;
      left: 50%;
      top: 50%; 
      transform: translate(-50%,-50%)
}