Vuetify中如何忽略导航图标实现app bar标题居中？

问题原因 #

你的布局偏移是因为小屏下左侧导航图标占据了实际宽度，两个v-spacer是分配导航图标之外的剩余空间，因此标题会在剩余空间居中而非整个app-bar居中。

解决方案1：绝对定位固定居中（最省心，无需考虑两侧元素宽度） #

给v-app-bar添加相对定位类，将标题设为绝对定位基于整个app-bar居中，同时给左右留出足够边距避免和两侧元素重叠：

<v-app-bar
  color="black"
  app
  class="position-relative"
>
  <v-app-bar-nav-icon class="d-lg-none"></v-app-bar-nav-icon>
  <v-app-bar-title
    class="text-no-wrap text-h3 position-absolute start-0 end-0 text-center mx-auto"
    style="max-width: calc(100% - 128px);"
  >
    Title
  </v-app-bar-title>
  <!-- 右侧可自由添加其他控件，不会影响标题居中 -->
</v-app-bar>

说明：max-width减去的128px是左右各预留64px（导航图标默认宽度），避免标题太长和两侧元素重叠，可根据实际需求调整数值。

解决方案2：对称占位保持正常流布局 #

在右侧添加一个和导航图标宽度一致的占位元素，仅在小屏显示，保持左右两侧权重对称，两个v-spacer分配的空间就会完全相等：

<v-app-bar
  color="black"
  app
>
  <v-app-bar-nav-icon class="d-lg-none"></v-app-bar-nav-icon>
  <v-spacer />
  <v-app-bar-title
    class="text-no-wrap text-h3"
    style="width: fit-content;"
  >
    Title
  </v-app-bar-title>
  <v-spacer />
  <!-- 右侧占位元素，宽度和导航图标一致，仅小屏显示 -->
  <div class="d-lg-none" style="width: 56px;"></div>
</v-app-bar>

说明：v-app-bar-nav-icon默认宽度为56px，右侧占位元素设为相同宽度后，小屏时左右两侧宽度对称，大屏时导航图标和右侧占位同时隐藏，始终保持布局对称。

内容的提问来源于stack exchange，提问作者MetinOnt