多个子div在父中垂直居中

在一个div下，有多个子div，且子div都是水平垂直居中

<template>
  <div>
  
    <div class="far">
      <!-- 注意需要多包裹一层 -->
      <div>
        <div class="son1">1</div>
        <div class="son2">22221</div>
      </div>
    </div>
    
  </div>
</template>

<script>
export default {
  data() {
    return {

    }
  },
}
</script>

<style lang="less" scoped>

div {
  text-align: center;
}

.far {
  width: 400px;
  height: 300px;
  background-color: #98f3cd;

  // flex布局居中
  display: flex;
  justify-content: center;
  align-items: center;

  .son1{
    background-color: cyan;

    // 如果需要自适应宽度和居中--打开这两行代码
    width: fit-content;
    margin:auto; // 解决自适应宽度的居中问题
  }
  .son2{
    background-color: cyan;
    width: 200px;
  }
}
</style>