CSS Flex 布局实现背景图片正方形覆盖文字居中

<style>
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30rpx;
    background-image: url('https://img.alicdn.com/imgextra/i1/752202202/O1CN01S9OqZl1S8Yw4n2GMx_!!752202202.png');
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
  }
  
  .text {
    color: white;
    text-align: center;
  }
</style>
<div class="container">
  <div class="text">这是一段文字</div>
</div>