.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博客_小程序居中
