一、水平居中

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;
}