垂直居中对齐

display flex

 <div>
    <div class="box">
      <img class="left" src="../../assets/imgs/logo-s.png" style="width: 80px" alt="" />
      <div class="right">
        <div>个人中心</div>
        <div class="eg">Person</div>
      </div>
    </div>
  </div>

<style lang="scss" scoped>
.box{
  display: flex;
  height: 80px;
  width: 180px;
  background-color: pink;
}
.left{
  vertical-align: middle;
}
.right{
  display: flex;
  // height: 100%;
  background-color: skyblue;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin:0 auto;
  // line-height: 40px;
}
</style>

vertical-align: middle

<div>
    <div class="box">
      <img class="left" src="../../assets/imgs/logo-s.png" alt="" />
      <span class="right">个人中心</span>
    </div>
  </div>

.box{
  width: 155px;
  background-color: skyblue;
}
.left{
  width: 80px;
  vertical-align: middle;
}
.right{
  margin-left: 5px;
  background-color: pink;
}