微信小程序元素水平居中或垂直居中

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