效果如下，中间那块内容垂直与水平居中：  [TOC] ### 代码如下： ``` <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> ```