微信小程序开发中的图片缺少后自动居中问题的解决，自动居中样式，自适应图片多少的写法

下面是写的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即可居中对齐
然后实现图片缺少后自动居中问题