嘿，我之前在项目里也碰到过这个糟心的问题！其实这就是Ag-Grid默认的编辑状态样式在搞小动作——当你点击单元格（不是复选框本身）时，单元格会进入编辑模式，而它自带的编辑单元格样式默认是左对齐的，直接把你之前设置的居中给覆盖掉了。

给你两个简单的解决办法，亲测有效：

• 方法一：用CSS强制统一普通和编辑状态的对齐
  先给你的复选框列加一个自定义的单元格类，然后在样式里不仅给这个类设置居中，还要给Ag-Grid的编辑状态单元格类也加上居中规则：
  首先在列定义里配置cellClass：

  const columnDefs = [
    {
      headerName: '选择',
      field: 'selected',
      cellRenderer: 'agCheckboxCellRenderer',
      editable: true,
      cellClass: 'center-checkbox-cell', // 自定义类名
    },
    // 其他列定义...
  ];
  

  然后在你的CSS文件里补充样式：

  .center-checkbox-cell {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  /* 关键：覆盖编辑状态下的默认左对齐样式 */
  .center-checkbox-cell.ag-cell-edit-focus {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  

• 方法二：直接在列定义里用cellStyle全局生效
  如果你不想额外维护CSS类，也可以直接在列的cellStyle里返回居中样式，这样不管单元格是普通状态还是编辑状态，都会应用这个规则：

  const columnDefs = [
    {
      headerName: '选择',
      field: 'selected',
      cellRenderer: 'agCheckboxCellRenderer',
      editable: true,
      cellStyle: () => ({
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
      }),
    },
    // 其他列定义...
  ];
  

核心思路其实就是不让编辑状态的默认样式覆盖你设置的居中对齐，两种方法都能解决问题，你可以根据自己的项目习惯选一个试试~

内容来源于stack exchange