如何让Vaadin Grid的表头与列内容均居中对齐？（Vaadin Flow 24）

有两种常用方式可以实现需求：

方法一：逐列配置对齐规则 #

针对每个Grid列，同时设置内容对齐和表头对齐：

// 以示例中的列为例
grid.addColumn(map -> map.get("firstName"))
    .setHeader("First Name")
    // 设置列内容居中
    .setAlign(ColumnAlign.CENTER)
    // 设置表头文字居中
    .setHeaderAlign(ColumnAlign.CENTER);

如果是动态生成列（比如遍历Map的键创建列），可以在循环中统一配置：

List<String> columnKeys = Arrays.asList("firstName", "lastName", "email");
for (String key : columnKeys) {
    // 格式化表头文字（首字母大写）
    String header = key.substring(0, 1).toUpperCase() + key.substring(1);
    grid.addColumn(map -> map.get(key))
        .setHeader(header)
        .setAlign(ColumnAlign.CENTER)
        .setHeaderAlign(ColumnAlign.CENTER);
}

方法二：全局CSS统一设置 #

如果希望所有列都默认居中，无需逐列配置，可以用CSS批量设置：

1. 给Grid添加自定义类名：

grid.addClassName("centered-grid");

2. 在项目的样式文件（比如frontend/styles.css或主题文件夹下的CSS文件）中添加以下规则：

.centered-grid th,
.centered-grid td {
    text-align: center;
}

这样Grid的所有表头单元格（th）和内容单元格（td）都会自动居中对齐。

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