3 种居中方式, 在页面布局中经常用到, 现作一记录。
第一种 水平居中
类似这样写法
display: flex;
flex-direction: column; //垂直布局
align-items: center; // 水平居中
justify-content: space-around; //垂直方向分散布局
第二种 垂直居中
类似这样写法
display: flex;
flex-direction: row; //水平布局
align-items: center; // 垂直居中
第三种 水平垂直布局
可以是类似这样写法:
display: flex;
flex-direction: column; // 垂直布局
align-items: center; // 水平居中
justify-content: center; //垂直居中文章来源:https://www.toymoban.com/news/detail-773467.html
width: 33%; //宽度占屏幕的1/3 文章来源地址https://www.toymoban.com/news/detail-773467.html
到了这里,关于微信小程序23__flex布局 相关的3种居中: 水平居中_垂直居中_水平垂直居中的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!