如何在Vuetify3中实现组件页面垂直水平居中？

要让内容整体在页面水平+垂直居中，只需调整<v-container>的布局类，补充垂直居中所需的flex属性：

原代码的<v-container>仅设置了水平居中与占满视口高度，缺少垂直居中的核心配置。修改后的完整代码如下：

<template>
  <v-container class="d-flex flex-column align-center justify-center fill-height fluid">
    <v-row class="d-flex justify-center mb-6">
      <h1>Contador <v-icon>mdi-clock-outline</v-icon></h1>
    </v-row>
    <v-row class="d-flex justify-center mb-6">
      <h2>{{ count }}</h2>
    </v-row>
    <v-row class="d-flex justify-center mb-6">
      <v-btn @click="increment" class="mx-5" icon><v-icon>mdi-plus</v-icon></v-btn>
      <v-btn @click="decrement" class="mx-5" icon><v-icon>mdi-minus</v-icon></v-btn>
    </v-row>
  </v-container>
</template>

关键类作用说明： #

• d-flex：将容器转为flex布局，为后续对齐属性提供基础
• flex-column：让子元素（v-row）保持垂直排列，保留原有内容的上下结构
• justify-center：在垂直排列的flex容器中，实现垂直方向居中
• align-center：维持内容的水平方向居中
• fill-height：确保容器占满整个视口高度，让垂直居中效果可见

修改后即可实现内容在页面正中间的显示效果。

内容的提问来源于stack exchange，提问作者Raúl Peñate