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



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

.children1{
  background-color: orangered;
}

.children2{
  background-color: yellow;
}

.children3{
  background-color: skyblue;
}

原始效果:
image.png

一、水平居中
水平居中&水平排列
/* wxss */
.father{
  width: 100%;
  height: 300rpx;
  background-color: lawngreen;
  display: flex;
  justify-content: center;
}

效果:
image1.png

水平居中&垂直排列
/* wxss */
.father{
  width: 100%;
  height: 300rpx;
  background-color: lawngreen;
  display: flex;
  flex-direction: column;
  align-items: center;
}

效果:
image2.png

二、垂直居中
垂直居中&水平排列
/* wxss */
.father{
  width: 100%;
  height: 300rpx;
  background-color: lawngreen;
  display: flex;
  align-items: center;
}

效果:
image3.png

垂直居中&垂直排列
/* wxss */
.father{
  width: 100%;
  height: 300rpx;
  background-color: lawngreen;
  display: flex;
  flex-direction:column;
  justify-content: center;
}

效果:
image4.png

三、中心居中
中心居中&水平排列
/* wxss */
.father{
  width: 100%;
  height: 300rpx;
  background-color: lawngreen;
  display: flex;
  align-items: center;
  justify-content: center;
}

效果:
image5.png

中心居中&垂直排列
/* wxss */
.father{
  width: 100%;
  height: 300rpx;
  background-color: lawngreen;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

效果:
image6.png

关于容器的属性,自己去查吧hiahiahia~

你可能感兴趣的:(微信小程序)