微信小程序中view水平垂直居中

微信小程序布局中view有时候需要在水平方向和垂直方向上都居中，发现flex布局可以实现，例如view1（图中灰色方块）需要实现居中，可以用如下设置实现：

wxss文件中的设置如下：

.main {
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: #c573ac;
  **display: flex;
  flex-direction: column;
  justify-content: space-around;**这三句使mainContent在垂直方向居中（main是mainContent的父容器）
}
.mainContent {
  width: 100%;
  **display: flex;
  flex-direction: column;
  align-items: center;**使mainContent中的view1水平方向上居中（mainContent是view1的父容器）
  background-color: #f20000;
}
.view1{
  width:100px;
  height:100px;
  background-color: #ccc;
}

wxml文件中代码：

<view class="main">
  <view class="mainContent">
    <view class="view1"></view>
  </view>
</view>

这样就可以使view1居中
（刚接触微信小程序有很多不懂的地方，这种方式是我觉得自己可以理解的有效的方式，如果有其他方式我们可以探讨）``