如何使Ant Design Checkbox组件的勾选标记居中对齐？

要将Antd Checkbox的勾选标记调整为居中状态，只需通过自定义CSS修正勾选图标的定位即可，以下是几种常用实现方式：

1. 全局统一调整 #

如果整个项目都需要修正这个偏移问题，可直接全局覆盖Antd的默认样式：

.ant-checkbox-inner::after {
  /* 将定位原点移到中心 */
  left: 50% !important;
  top: 50% !important;
  /* 平移实现居中，保留原本的旋转角度 */
  transform: translate(-50%, -50%) rotate(45deg) !important;
  /* 清除默认的margin值 */
  margin: 0 !important;
}

2. 局部单独调整 #

如果只需要修改特定的Checkbox，给目标组件添加自定义类名后再写样式，避免影响全局：

组件代码 #

<Checkbox className="centered-checkbox">示例选项</Checkbox>

对应CSS #

.centered-checkbox .ant-checkbox-inner::after {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  margin: 0;
}

注：如果Antd默认样式优先级更高，可在属性后添加!important强制生效。

3. CSS-in-JS 方式适配（如styled-components） #

使用CSS-in-JS方案时，可直接封装自定义Checkbox组件：

import styled from 'styled-components';
import { Checkbox } from 'antd';

const CenteredCheckbox = styled(Checkbox)`
  .ant-checkbox-inner::after {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    margin: 0;
  }
`;

// 使用示例
<CenteredCheckbox>自定义居中选项</CenteredCheckbox>

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