uni-app 微信小程序，flex 实现内容元素垂直与水平居中

效果如下，中间那块内容垂直与水平居中：

代码如下：

<template>
  <view class="training-record-container">
    <view class="statistics-area">
      <view class="sta-training-item">
        <view class="sta-ti-content">
          <view>6个</view>
          <view class="sta-tic-desc">完成任务</view>
        </view>
      </view>
      <view class="sta-training-item">
        <view class="sta-ti-content">
          <view>6个</view>
          <view class="sta-tic-desc">参与专班</view>
        </view>
      </view>
      <view class="sta-training-item">
        <view class="sta-ti-content">
          <view>6个</view>
          <view class="sta-tic-desc">获取证书</view>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
const state = reactive({
  popupShow: false
})
</script>
<style lang="scss">
/* 为页面根元素设置背景颜色 */
page {
  background-color: #f7f7f8;
}
</style>
<style lang="scss" scoped>
.training-record-container {
  margin-top: 20rpx;
  padding-left: 20rpx;
  padding-right: 20rpx;
  .statistics-area {
    display: flex;
    justify-content: space-between;
    .sta-training-item {
      height: 130rpx;
      width: 216rpx;
      background: #ecf5ff;
      border-radius: 2px 2px 2px 2px;
      opacity: 1;
      border: 1px solid #b3d8ff;
      text-align: center;
      display: flex;
      justify-content: center;
      font-size: 12px;
      font-family: MicrosoftYaHei-Regular, MicrosoftYaHei;
      font-weight: 400;
      color: #409eff;
      .sta-ti-content {
        align-self: center;
        .sta-tic-desc {
          margin-top: 9rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          letter-spacing: 5rpx;
        }
      }
    }
  }
}
</style>

外层设置为flex,然后设置一个justify-content: center;里边那块就可以水平居中了,如果要里边那块view里的文字也水平居中设置一下text-align: center就行。然后里边的view设置一个align-self: center;就可以垂直居中了。如果align-self: center不行可以试试align-items: center;

增加了背景图，以及更丰富的一些样式

<template>
  <view class="training-record-container">
    <view class="statistics-area">
      <view class="sta-training-item">
        <view class="sta-ti-content">
          <view class="sta-tic-value">6个</view>
          <view class="sta-tic-desc">完成任务</view>
        </view>
      </view>
      <view class="sta-training-item">
        <view class="sta-ti-content">
          <view class="sta-tic-value">6个</view>
          <view class="sta-tic-desc">参与专班</view>
        </view>
      </view>
      <view class="sta-training-item">
        <view class="sta-ti-content">
          <view class="sta-tic-value">6个</view>
          <view class="sta-tic-desc">获取证书</view>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
const state = reactive({
  popupShow: false
})
</script>
<style lang="scss">
/* 为页面根元素设置背景颜色 */
page {
  background-color: #f7f7f8;
}
</style>
<style lang="scss" scoped>
.training-record-container {
  margin-top: 20rpx;
  padding-left: 20rpx;
  padding-right: 20rpx;
  .statistics-area {
    display: flex;
    justify-content: space-between;
    .sta-training-item {
      height: 130rpx;
      width: 216rpx;
      background-image: url('~@/static/imgs/teacher-center/training_back1.png');
      background-size: cover;
      opacity: 1;
      text-align: center;
      display: flex;
      justify-content: center;
      font-size: 12px;
      font-family: MicrosoftYaHei-Regular, MicrosoftYaHei;
      font-weight: 400;
      color: #409eff;
      .sta-ti-content {
        align-self: center;
        .sta-tic-value{
          color:#fff;
        }
        .sta-tic-desc {
          margin-top: 9rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color:#fff;
          letter-spacing: 5rpx;
        }
      }
    }
    .sta-training-item:nth-child(1){
      background-image: url('~@/static/imgs/teacher-center/training_back1.png');
    }
    .sta-training-item:nth-child(2){
      background-image: url('~@/static/imgs/teacher-center/training_back2.png');
    }
    .sta-training-item:nth-child(3){
      background-image: url('~@/static/imgs/teacher-center/training_back3.png');
    }
  }
}
</style>