Html Vue.js复选框对齐问题：在表格单元格中居中复选框

我遇到了Vue.js应用程序中复选框对齐问题.我正在try 将复选框置于各自的表格单元中.默认情况下，它们显示为左对齐.当对单元格应用CSS样式时，所有复选框意外地垂直对齐到表格最左边列的中心，而不是保持在单元格的中心.如何解决这种对齐不一致？

<tbody>
    <!-- Loop over roles -->
    <template v-for="(characters, role) in categorizedCharacters" :key="role">
        <tr @click="toggleRoleVisibility(role)">
            <td>{{ role }}</td>
            <!-- Placeholder cells for alignment with the header; hidden but keeps the structure -->
            <td v-for="event in state.events" :key="`role-${event.title}-${role}`"></td>
        </tr>
        <!-- Loop over characters within each role -->
        <template v-if="state.roleVisibility[role]" v-for="character in characters" :key="character.name">
            <tr>
                <td>{{ character.name }}</td>
                <!-- Generate a cell for each event -->
                <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;
}

谢谢你的帮助