微信浏览器下flex布局子元素内容不水平居中

Question

底部的一个bar使用flex布局，放了三个子div
子div内的内容不水平居中
在有些iphone下水平居中，有些iphone向右偏移了3 4 px

<div class="tab" :class="{ ipx: isIpx }">
      <div class="tab-item">
        <div class="itemWrapper">
          <router-link to="/home" tag="a" :class="{ 'active': position===1 }" style="text-decoration:none;">
            <img src=".././common/img/[e-mail]" alt="" v-if="position===1" width="40" height="40">
            <img src=".././common/img/[e-mail]" alt="home" v-else width="40" height="40">
            <div class="text">首页</div>
          </router-link>
        </div>
      </div>
      <div class="tab-item">
        <div class="itemWrapper">
          <router-link to="/rules" tag="a" :class="{ 'active': position===2 }" style="text-decoration:none;">
            <img src=".././common/img/[e-mail]" alt="" v-if="position===2" width="40" height="40">
            <img src=".././common/img/[e-mail]" alt="home" v-else width="40" height="40">
            <div class="text">活动规则</div>
          </router-link>
        </div>
      </div>
      <div class="tab-item">
        <div class="itemWrapper">
          <router-link to="/list" tag="a" :class="{ 'active': position===3 }" style="text-decoration:none;">
            <img src=".././common/img/[e-mail]" alt="" v-if="position===3" width="40" height="40">
            <img src=".././common/img/[e-mail]" alt="home" v-else width="40" height="40">
            <div class="text">榜单</div>
          </router-link>
        </div>
      </div>
    </div>
    
    
     .tab
      display flex
      display: -webkit-flex; /* Safari */
      position fixed
      bottom 0
      width 100vw !important
      height 54px
      background #ffffff
      z-index 400
      border none
      .tab-item
        flex 1
        text-align center
        margin-top 6px
        /*border 1px solid #000*/
        .itemWrapper
          display flex
          width 100%
          justify-content center
          a
            display grid !important
            text-align: -webkit-center;
          img
            height 24px
            width 24px
          & > a
            display block
            font-size 14px
            opacity 1
            color #919191
          .active
            color #f3b26d
          .text
            margin-top: 3px

Answer 1

已解决，是子元素下 justify-content center属性的问题，当初用这个属性是因为放的图片与文字中间有一块间隙，后给img一个vertical-align: bottom;属性解决了