如何在Vuetify的v-card组件中垂直居中p元素？

问题分析 #

你的v-card设置了固定高度80vh，但内部的预览区域v-row仅包裹内容高度，导致其中的<p>元素无法自动垂直居中。之前尝试的align、align-center等属性因父容器高度不足，无法发挥作用。

解决方案 #

通过Vuetify的flex布局类，调整v-card内部空间分配，让预览区域占满剩余高度并垂直居中内容：

1. 给v-card添加d-flex flex-column类，将内部布局改为垂直flex；
2. 给预览区域的v-row添加flex-grow-1 align-items-center，使其占满v-card剩余空间，并垂直居中内部元素；
3. 可选：给文件输入的v-row添加mb-4类，保持和预览区域的间距。

修改后的代码 #

<v-container fluid>
    <!-- page title -->
    <v-row>
      …
    </v-row>
    <!-- body -->
    <v-row justify="center" no-gutters>
      <!-- input -->
      <v-col cols="5">
        <!-- 添加d-flex flex-column让card内部垂直布局 -->
        <v-card outlined height="80vh" max-height="80vh" class="pa-8 d-flex flex-column">
          <!-- image upload -->
          <!-- 可选添加mb-4保持间距 -->
          <v-row class="mb-4">
            <v-col>
              <v-file-input
                accept="image/png, image/jpeg"
                chips
                label="Choose an image(JPG or PNG)"
                outlined
                prepend-icon="image"
                show-size
                v-model="image"
                @change="previewImage"
                @click:clear="clearAll"
              ></v-file-input>
            </v-col>
          </v-row>
          <!-- image preview -->
          <!-- 添加flex-grow-1占满剩余空间，align-items-center垂直居中 -->
          <v-row class="flex-grow-1 align-items-center">
            <v-col>
              <p v-if="no_image" class="text-center text-h4 grey--text">
                Image Preview
              </p>
              <v-img v-else :src="imageUrl" contain max-height="55vh"></v-img>
            </v-col>
          </v-row>
        </v-card>
      </v-col>
      <!-- button -->
      <v-col align-self="center" cols="2">
        …
      </v-col>
      <!-- output -->
      <v-col cols="5" align-self="center">
        …
      </v-col>
    </v-row>
  </v-container>

原理说明 #

• d-flex flex-column：让v-card成为垂直方向的flex容器，内部元素沿垂直方向排列；
• flex-grow-1：让预览区域的v-row占据v-card中除文件输入区域外的所有剩余高度；
• align-items-center：让v-row内部的元素（<p>或v-img）在垂直方向上居中。

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