微信小程序-设置多个子元素水平居中或垂直居中

注：每种情况的美化CSS样式已经删去。

<view class='father'>
  <view class='children'>子元素</view>
  <view class='children'>子元素</view>
  <view class='children'>子元素</view>
</view>

一、水平居中

1、排列方向为水平方向

.father{
  display: flex;
  align-items: center;
}

2、排列方向为竖直方向

.father{
  display: flex;
  flex-direction: column;
  align-items: center;
}

二、垂直居中

1、排列方向为水平方向

.father{
  display: flex;
  flex-direction:column;
  justify-content: center;
}

2、排列方向为竖直方向

.father{
  display: flex;
  justify-content: center;
}

三、中心居中

1、排列方向为水平方向

.father{
  display: flex;
  align-items: center;
  justify-content: center;
}

2、排列方向为竖直方向

.father{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}