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

<!-- 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~