CSS垂直水平局中

采用变换设置居中

.center{
    position: relative;
    top: 50%;
    left: 50%;
    width: 30vw;
    height: 30vw;
    -webkit-transform:translateX(-15vw) translateY(-15vw);
}

给父体设置为弹性盒布局，令其子元素居中

.center{
      display: -webkit-box;

      -webkit-box-align:center;

      -webkit-box-pack:center;
}

-webkit-box-align处理垂直空间，其值为：

• start：元素沿容器的顶边放置。
• end：元素沿容器的底边放置。
• center：元素放置在中间。

-webkit-box-pack处理水平空间，其值为：

• start：元素放置在左边。
• end：元素放置在右边。
• center：元素放置在中间。