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

最新推荐文章于 2024-08-15 23:03:45 发布

大白菜程序猿

最新推荐文章于 2024-08-15 23:03:45 发布

阅读量3.2k

点赞数 1

分类专栏：微信小程序文章标签：微信小程序 css css3

本文链接：https://blog.csdn.net/m0_50641264/article/details/125185102

版权

微信小程序专栏收录该内容

19 篇文章 7 订阅

订阅专栏

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

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