下面是寫的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即可居中對齊
然后實現圖片缺少后自動居中問題