「微信小程序开发 | 居中布局」

  块1
  块2
  块3

/* 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~