Angular 15中AG-Grid表头无法居中，求解决方案

直接生效的CSS方案 #

AG-Grid的表头内容由.ag-header-cell-label（普通表头）和.ag-header-group-cell-label（分组表头）容器控制，以下是两种可行的解决方式：

方式一：高优先级全局覆盖

如果不想调整列定义，直接用全局CSS覆盖核心元素：

/* 普通表头单元格内容居中 */
.ag-header-cell .ag-header-cell-label {
  justify-content: center !important;
  text-align: center !important;
}

/* 分组表头内容居中（如果用到分组） */
.ag-header-group-cell .ag-header-group-cell-label {
  justify-content: center !important;
  text-align: center !important;
}

方式二：结合自定义headerClass精准控制

利用你已定义的header-center类，通过层级选择器提高样式优先级，避免使用!important：

/* 普通表头：通过自定义类定位内部标签容器 */
.header-center .ag-header-cell-label {
  justify-content: center;
  text-align: center;
}

/* 分组表头：针对分组单元格的自定义类 */
.header-center.ag-header-group-cell .ag-header-group-cell-label {
  justify-content: center;
  text-align: center;
}

解决Angular组件样式封装问题 #

如果组件内的CSS无法穿透到AG-Grid（Angular默认ViewEncapsulation会隔离样式），可以添加::ng-deep穿透：

::ng-deep .header-center .ag-header-cell-label {
  justify-content: center;
  text-align: center;
}

::ng-deep .ag-header-group-cell-label {
  justify-content: center;
  text-align: center;
}

验证步骤 #

1. 确认你的defaultColDef配置正确：

// 组件内的defaultColDef定义
defaultColDef = {
  resizable: false,
  sortable: false,
  editable: false,
  flex: 1,
  headerClass: 'header-center'
};

2. 将上述CSS添加到组件的styles.css或全局样式文件中
3. 刷新页面后，检查元素确认样式是否已应用到目标容器

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