display:flex 小程序简易使用方法 display:flex 小程序简易使用方法开发微信小程序，遇到了图片的一些问题，比如在某些界面中要求图片水平居中、垂直居中，在某些界面中要求图片铺满全屏幕。.wxml文件<view class='imagebox'> <image src="/images/1.png" mode="widthFix"> </image> </view>图片水平居中.imagebox{ display:flex; /*设置为flex布局*/ justify-content: center; /*水平居中*/ } .imagebox image { width:300rpx; height:300rpx; }图片垂直居中.imagebox{ display:flex; height: 500px; justify-content: center;/*水平居中*/ align-items:center; /*垂直居中*/ } .imagebox image { width:300rpx; height:300rpx; }图片居中铺满全屏幕page{ height:100%; /*设置高度100%，达到满屏状态*/ } .imagebox{ display:flex; height: 100%;/*重点，铺满全屏*/ justify-content: center; align-items:center; } .imagebox image { width:300rpx; height:300rpx; }元素垂直居中 .data{ display: flex; justify-content: center; flex-direction:column; align-items:center; }