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

一、水平居中

1、排列方向为水平方向

.father{
display: flex;
align-items: center;
}

2、排列方向为竖直方向

.father{
display: flex;
flex-direction: column;
align-items: center;
}

二、垂直居中

1、排列方向为水平方向

.father{
display: flex;
flex-direction:column;
justify-content: center;
}

2、排列方向为竖直方向

.father{
display: flex;
justify-content: center;
}

三、中心居中

1、排列方向为水平方向

.father{
display: flex;
align-items: center;
justify-content: center;
}

2、排列方向为竖直方向

.father{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}