css样式：同心圆中图片文字居中

效果如下：

html中的代码

<div
  class="content-item"
  :class="activeId === item.id ? 'active' : ''"
  v-for="item in CONFIG.collectionList"
  :key="item.id"
>
  <div class="circle">
    <div class="middle">
      <div class="middle-ex">
        <el-image
          class="img"
          :src="activeId === item.id ? item.selectedSrc : item.src"
          @mouseenter="item.selectedSrc"
          lazy
        ></el-image>
        <div class="title">{{ $t(item.label) }}</div>
        <div :class="activeId === item.id ? 'active-item' : ''"></div>
      </div>
    </div>
  </div>
</div>

scss样式代码

.middle {
  box-shadow: 0px 1px 5px 0px rgba(45, 125, 184, 0.3);
  border: 20px solid #ffffff;
  background: #f0f5ff;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  .middle-ex {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-top: 30%;
    .img {
      width: 30px;
      height: 30px;
    }
    .title {
      font-size: 18px;
      margin-top: 2px;
    }
  }
}