Vuetify 1.5升级至2.6：如何使带row属性的v-radio-group单选按钮居中？

你的问题出在没有完全匹配原1.5版本布局的flex方向和对齐属性，以下是修正后的代码：

<v-row direction="column" align="center" justify="center" class="fill-height">
  <v-col align="center">
    <p class="text-h5">朝代选择：</p>
    <v-radio-group v-model="dynastySelected" row>
      <v-radio
        v-for="(dynasty, index) in dynastys"
        :key="index"
        :label="dynasty"
        :value="dynasty"
      ></v-radio>
    </v-radio-group>
  </v-col>
</v-row>

关键修改点说明： #

1. direction="column"：将v-row的主轴方向设为垂直，对应原1.5中v-layout column的垂直排列效果，让标题和单选按钮组垂直分布。
2. align="center" + justify="center"：分别实现交叉轴（水平）和主轴（垂直）的居中对齐，完全匹配原v-layout align-center justify-center的居中效果。
3. class="fill-height"：让v-row占满父容器高度，确保垂直居中生效（Vuetify 2.x中v-row不会默认占满父容器高度，这是和原v-layout的核心差异点）。
4. v-col align="center"：让列内的标题和单选按钮组水平居中，对应原v-flex的内容居中表现。

原代码的问题在于：v-row默认是水平主轴方向，仅设置justify="center"只能让v-col在水平方向居中，但列内元素仍左对齐，且没有实现垂直方向的居中布局，因此样式和原版本不符。

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