块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~
推荐阅读
- 「微信小程序开发 | 轮播图」
- 微信小程序|【uni-app】搜索框的防抖处理
- Python毕设项目含论文|含文档+PPT+源码等]精品基于Python实现的本地健康宝微信小程序[包运行成功]Python毕业设计项目源码微信小程序毕设django项目源码
- 计算机毕业设计|计算机实战项目 含文档+PPT+源码等]精品基于Python实现的本地健康宝微信小程序
- 微信小程序|UniApp微信小程序登录不同角色动态设置TabBer(多于5个TabBer页面)
- 微信小程序|uniapp开发微信小程序-软考刷题小程序
- uniapp|uniapp（微信小程序使用高德地图进行坐标反解析获取详细地址）
- 微信小程序|uniapp打包微信小程序识别二维码