微信瀏覽器下flex布局子元素內容不水平居中

底部的一個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/home-active@2x.png" alt="" v-if="position===1" width="40" height="40">
            <img src=".././common/img/home@2x.png" 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/rule-active@2x.png" alt="" v-if="position===2" width="40" height="40">
            <img src=".././common/img/rules@2x.png" alt="home" v-else width="40" height="40">
            <div class="text">活動規(guī)則</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/list-active@2x.png" alt="" v-if="position===3" width="40" height="40">
            <img src=".././common/img/list@2x.png" 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