下面是写的wxml的view样式类似于web开发中的HTML文件
home-grid是我创建的一个父样式，采用子绝父相的定位方式
我在home-grid的父view（类似于web中div）中包含了三个小的子样式分别是下述代码中的class=“yellowstar”，class=“maintain”，**class=“StateOfLife”**三个样式，其中分别包含了图片+文字

 <view class="home-grid"><i-grid-item wx:if="{{install}}" i-class="i-grid-item" bind:tap="tiaozhuan"><view class="yellowstar"><text class="installnumone">12</text><image class="installpicone" src="../../images/num.svg"></image>//可忽略<image class="installpic" src="../../images/installpic.svg"></image>//主要图片<i-grid-label class="installzi">我要安装</i-grid-label></view></i-grid-item><i-grid-item wx:if="{{Repair}}" i-class="i-grid-item" bind:tap="weixiu"><view class="maintain"><text class="installnumone">12</text><image class="installpicone" src="../../images/num.svg"></image><i-grid-icon><image class="Maintenancepic" src="../../images/Maintenance.svg"></image></i-grid-icon><i-grid-item class="Maintenancezi">我要维修</i-grid-item></view></i-grid-item><i-grid-item wx:if="{{lifecycle}}" i-class="i-grid-item" bind:tap="lifecycle"><view class="StateOfLife"><i-grid-icon><image class="lifecycle" src="../../images/lifecycle.svg"></image></i-grid-icon><i-grid-item class="lifecyclezi">设备生命周期</i-grid-item></view></i-grid-item></view>

下面的代码是三个class的样式

.yellowstar, .maintain, .StateOfLife {display: flex;flex-direction: column;justify-content: center;margin-left: -6rpx;width: 260rpx;height: 300rpx;align-items: center;
}

下面是父样式

.home-grid {position: relative;display: flex;width: 100%;height: auto;justify-content: left;align-items: center;
}

justify-content: left;的样式我写的是左对齐，改为center即可居中对齐
然后实现图片缺少后自动居中问题