实现图片和文字水平垂直居中

业务需求是，一张图片居中显示在页面，图片下方16px处有一行文字，也是水平垂直居中。用两种方法实现，实现效果图如下

方法一：

 <template>
     <div class="box">
        < img src="../../../../assets/images/icon_emptystates.png" />
        <span>请先在左侧选择相应的业务</span>
      </div>
   </template>

   <style scoped>
      .box{
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
          }
       span{
            font-family: MicrosoftYaHei;
            font-size: 16px;
            color: #75829C;
            letter-spacing: 0;
            text-align: center;
            line-height: 24px;
            font-weight: 400;
            margin-top: 16px;
          }
        </style>

方法二：

 <template>
    <div class="box">
        <div class="img" title="请先在左侧选择相应的业务">
        </div>
     </div>
 </template>
 <style scoped lang="less">
     .box {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .img {
              position: relative;
              width: 100%;
              height: 120px;
              background: url(../../assets/image/icon_emptystates.png) no-repeat center / 120px 120px;
              &::after {
              content: attr(title);
              position: absolute;
              top: 136px;
              width: 100%;
              text-align: center;
              font-family: MicrosoftYaHei;
              font-size: 16px;
              color: #75829C;
              letter-spacing: 0;
              text-align: center;
              line-height: 24px;
              font-weight: 400;
          }
        }
      }
   </style>