CSS实现div背景图片自适应并垂直居中文字

<style>
  .grid-item-box {
    background-image: url('https://img.alicdn.com/imgextra/i1/752202202/O1CN01S9OqZl1S8Yw4n2GMx_!!752202202.png');
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .text {
    display: inline-block;
    vertical-align: middle;
  }
</style>
<view class='grid-item-box'>
  <text class='text'>123</text>
</view>