元素居中方式总结

垂直居中：

块级元素

1.使用position设置定位方式后进行元素的偏移

    .box {
      width: 300px;
      height: 300px;
      background-color: burlywood;
      position: relative;
      top: 50%; /*元素顶部将会定位到希望的居中位置，需要将元素上移自身高度的50%*/
      margin-top: -150px;
      /*上移自身高度的一半*/
      /*
      transform: translateY(-50%);
      CSS3特性，可在高度不确定时使用
      */
    }