如何更改上述代码使头像以及问候语水平居中垂直居中

要在头像和问候语上实现水平垂直居中，你可以采用CSS Flexbox或者Grid布局。假设`Avatar`和`Greeting`组件分别代表头像和问候语部分，下面是一个基本的例子：

<div class="centered-content">
  <Avatar :src="userinfo.avatar || headerImg" />
  <div class="greeting">
    <h1>{{ userinfo.name }}</h1>
    <p>{{ greetingText }}</p>
  </div>
</div>

<style>
.centered-content {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;   /* 垂直居中 */
  height: 100%;         /* 如果容器有高度限制 */
  padding: 20px;        /* 适应边距 */
}

在这个例子中，`.centered-content`设置了Flexbox布局，并通过`justify-content: center`使其子元素在主轴（这里是横轴）上居中，`align-items: center`使其子元素在交叉轴（纵轴）上居中。记得替换`height: 100%`和`padding`为实际需要的样式。