如何在不改变父元素的状态下使其内部的许多子元素水平居中

<div class="user-info" :model="userInfo">
  <el-avatar :size="48" :src="circleUrl"></el-avatar>
  <div>{{userInfo.name}}</div>
  <div>{{userInfo.position}}</div>
</div>

现在不改变user-info的状态如何让其三个子元素水平居中？

直接给每个子元素加上如下代码

.user-info{
    display: block;
    margin: 0 auto;
}

使用弹性布局flex