• 假如父容器的高度由内容撑开，可以设置上下 padding 一样来达到垂直居中的效果
  代码

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

• 假如父容器的高度是确定的，可以添加一个伪元素.middle::before，
  构造一个高度撑满父容器，垂直居中的元素，对它垂直居中，那么就是对父容器垂直居中了。
  优点：安全无副作用，居家旅行垂直居中必备良药。
  缺点：IE6~8 不支持伪元素，无法使用。
  代码

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

• 假如父容器的高度是确定的，可以将父容器的 display 属性设置成 table-cell，再添加 vertical-align: middle;来达到垂直居中的效果，
  优点：简单方便。
  缺点：这样改变了父容器的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%)
}