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