如何在Vuetify中居中对齐Expansion Panel Header？

要让v-expansion-panel-header内的内容整体居中，可以通过以下两种方式实现：

方式一：利用Vuetify内置属性 #

给v-expansion-panel-header添加justify="center"属性，同时让内部的v-row占满宽度，确保布局正常：

<v-expansion-panels>
  <v-expansion-panel
    v-for="(item,i) in 5"
    :key="i"
  >
    <v-expansion-panel-header justify="center">
       <v-row no-gutters class="w-100">
        <v-col class="text-center"> AAA </v-col>
        <v-col class="text-center">
          <v-icon color="teal"> mdi-check </v-icon>
        </v-col>
        <v-col class="text-center">
          <v-btn text color="red" @click.stop="remove(index, type)">
            DELETE
          </v-btn>
        </v-col>
      </v-row>
    </v-expansion-panel-header>
    <v-expansion-panel-content>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </v-expansion-panel-content>
  </v-expansion-panel>
</v-expansion-panels>

• justify="center"：让v-expansion-panel-header内部的内容容器在水平方向居中；
• class="w-100"：确保v-row占满header的可用宽度，避免内容收缩；
• text-center：可选，让列内的文本/元素也居中对齐。

方式二：自定义CSS样式 #

如果需要更灵活的控制，可以通过CSS修改header内容容器的布局：

.v-expansion-panel-header__content {
  justify-content: center !important;
}

这段代码会强制v-expansion-panel-header的内容容器使用justify-content: center，实现整体居中效果。

内容的提问来源于stack exchange，提问作者code-8