关于微信小程序:微信小程序开发-居中布局

<!-- wxml -->
<view class="father">
  <view class="children1"> 块 1 </view>
  <view class="children2"> 块 2 </view>
  <view class="children3"> 块 3 </view>
</view>

/* wxss */
.father{
  width: 100%;
  height: 300rpx;
  background-color: lawngreen;
}

.children1{background-color: orangered;}

.children2{background-color: yellow;}

.children3{background-color: skyblue;}

原始成果：

一、程度居中

程度居中 & 程度排列

/* wxss */
.father{
  width: 100%;
  height: 300rpx;
  background-color: lawngreen;
  display: flex;
  justify-content: center;
}

成果：

程度居中 & 垂直排列

/* wxss */
.father{
  width: 100%;
  height: 300rpx;
  background-color: lawngreen;
  display: flex;
  flex-direction: column;
  align-items: center;
}

成果：

二、垂直居中

垂直居中 & 程度排列

/* wxss */
.father{
  width: 100%;
  height: 300rpx;
  background-color: lawngreen;
  display: flex;
  align-items: center;
}

成果：

垂直居中 & 垂直排列

/* wxss */
.father{
  width: 100%;
  height: 300rpx;
  background-color: lawngreen;
  display: flex;
  flex-direction:column;
  justify-content: center;
}

成果：

三、核心居中

核心居中 & 程度排列

/* wxss */
.father{
  width: 100%;
  height: 300rpx;
  background-color: lawngreen;
  display: flex;
  align-items: center;
  justify-content: center;
}

成果：

核心居中 & 垂直排列

/* wxss */
.father{
  width: 100%;
  height: 300rpx;
  background-color: lawngreen;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

成果：

对于容器的属性，本人去查吧 hiahiahia~