微信小程序水平居中，和垂直居中

1.WXML信息展示

<view class='imagebox'>
  <image src="/images/1.png" mode="widthFix">
  </image>
</view>

2.wxss样式展示文件

• 1.图片水平居中

.imagebox{
 display:flex;    /*设置为flex布局*/
 justify-content: center; /*水平居中*/
}
.imagebox image { 
  width:300rpx;
  height:300rpx;
 }

• 2.图片垂直居中

.imagebox{
display:flex;
height: 500px; 
justify-content: center;/*水平居中*/        
align-items:center;  /*垂直居中*/

}
.imagebox image { 
 width:300rpx;
 height:300rpx;
}

• 3.图片居中铺满全屏幕

page{
   height:100%; /*设置高度100%，达到满屏状态*/
}
.imagebox{
 display:flex;
 height: 100%;/*重点，铺满全屏*/
 justify-content: center;
 align-items:center;
 
}
.imagebox image { 
  width:300rpx;
  height:300rpx;
  }