Vue.js表格单元格内复选框居中对齐问题求助

问题根源是给<td>设置display: flex后，表格原生的列宽计算逻辑被破坏，导致复选框所在单元格宽度收缩至最小，视觉上呈现出所有复选框对齐到左侧列中心的异常效果。下面是几种可行的修复方案：

方案1：用表格原生属性实现居中（推荐） #

无需修改单元格的display类型，直接利用表格自带的对齐属性：

.checkbox-cell {
  text-align: center; /* 水平居中 */
  vertical-align: middle; /* 垂直居中 */
}

这种方式完全保留表格布局逻辑，是最稳妥的做法。

方案2：保留flex布局但固定单元格宽度 #

如果坚持使用flex，需要确保单元格拥有足够宽度，避免宽度塌陷：

.checkbox-cell {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px; /* 根据实际需求设置宽度 */
}

或者让单元格继承表格列的宽度：

.checkbox-cell {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

方案3：直接给复选框设置对齐样式 #

跳过单元格样式，直接给复选框添加自动外边距实现水平居中，配合单元格垂直对齐：

.checkbox-cell {
  vertical-align: middle;
}
.checkbox-cell input[type="checkbox"] {
  display: block;
  margin: 0 auto;
}

问题场景参考 #

原始Vue模板代码：

<tbody>
    <!-- 遍历角色 -->
    <template v-for="(characters, role) in categorizedCharacters" :key="role">
        <tr @click="toggleRoleVisibility(role)">
            <td>{{ role }}</td>
            <!-- 占位单元格保持与表头结构对齐 -->
            <td v-for="event in state.events" :key="`role-${event.title}-${role}`"></td>
        </tr>
        <!-- 遍历每个角色下的角色 -->
        <template v-if="state.roleVisibility[role]" v-for="character in characters" :key="character.name">
            <tr>
                <td>{{ character.name }}</td>
                <!-- 为每个事件生成单元格 -->
                <td v-for="event in state.events" :key="`signup-${event.title}-${character.name}`" class="checkbox-cell">
                    <input type="checkbox" :checked="characterSignedUp(character, event)" />
                </td>
            </tr>
        </template>
    </template>
</tbody>

初始错误样式：

.checkbox-cell {
    display: flex;
    justify-content: center;
    align-items: center;
}

效果说明：

• 调整前：复选框在单元格内左对齐
• 错误调整后：所有复选框偏移至左侧列垂直中心
• 修复后：每个复选框在自身单元格内水平垂直居中

内容的提问来源于stack exchange，提问作者Nessim Ben Ammar