微信小程序讓image圖片居中顯示和鋪滿屏幕的代碼

wxml

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

wxss

1、圖片水平居中（屏幕頂部）：

.imagesize{
 display:flex;                    //flex佈局
 justify-content: center;         //水平軸線居中
}
.imagesize image { 
  width:400rpx;
  height:400rpx;
 }

2、圖片居中（中部，位置可調 →height 和 align-items）

.imagesize{
 display:flex;
 height: 600px;                    //flex佈局高度
 justify-content: center;        
 align-items:center;                //垂直居中
 
}
.imagesize image { 
  width:400rpx;
  height:400rpx;
}

3.圖片居中（屏幕正中間）

page{
   height:100%                        //滿屏設置
}
.imagesize{
 display:flex;
 height: 100%;                        //設置佈局滿屏
 justify-content: center;
 align-items:center;
 
}
.imagesize image { 
  width:400rpx;
  height:400rpx;
}