.wxml<view class="father"><view class="children1">子元素1</view><view class="children2">子元素2</view><view class="children3">子元素3</view></view>
.wxss.father{display: flex;align-items: center;height: 100rpx;background-color: #00ff00;}.children1{background-color: #ff004c;}.children2{background-color: #c6c4cc;}.children3{background-color: #eeff00;}
一、水平居中
1、排列方向为水平方向
.father{
display: flex;
align-items: center;
height: 100rpx;
background-color: #00ff00;
}
2、排列方向为竖直方向
.father{
display: flex;
flex-direction: column;
align-items: center;
background-color: #00ff00;
overflow: hidden;
}
二、垂直居中
1、排列方向为水平方向
.father{
display: flex;
flex-direction:column;
justify-content: center;
background-color: #00ff00;
}
2、排列方向为竖直方向
.father{
display: flex;
justify-content: center;
background-color: #00ff00;
}
father的高度等于最大item的高度
三、中心居中
1、排列方向为水平方向
.father{
display: flex;
align-items: center;
justify-content: center;
background-color: #00ff00;
}
2、排列方向为竖直方向
.father{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #00ff00;
}
微信小程序元素水平居中或垂直居中_qq_33880604的博客-CSDN博客_小程序居中
如果觉得《微信小程序元素水平居中或垂直居中》对你有帮助，请点赞、收藏，并留下你的观点哦！
