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

一、水平居中1、排列方向为水平方向.father{display: flex;align-items: center;}2、排列方向为竖直方向.father{display: flex;flex-direction: column;align-items: center;}二、垂直居中1、排列方向为水平方向.father{display: flex;flex-di...

文章共197字 · 阅读需要大约1分钟

一键AI生成摘要，助你高效阅读

问答

qq_33880604

46143人浏览 · 2019-04-15 11:13:53

qq_33880604 · 2019-04-15 11:13:53 发布

在这里插入图片描述
一、水平居中

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