CSS Angular Material 2 表头居中对齐

在本文中，我们将介绍如何使用CSS来实现Angular Material 2表格的表头居中对齐。

阅读更多：CSS 教程

什么是Angular Material 2表格

Angular Material是一个由Angular官方支持的UI框架，用于创建丰富的Web应用程序。其中，Angular Material 2表格是一个非常有用的组件，用于显示和处理大量的数据。

Angular Material 2表格的一个重要部分是表头。通常情况下，表头用于显示表格中各列的标题。虽然Angular Material 2提供了默认的样式和布局来处理表头，但是有时我们可能需要自定义表头以满足特定的设计要求。其中之一是将表头中的标题居中对齐。

使用CSS实现表头居中对齐

要实现表头的居中对齐，我们可以使用CSS的flexbox布局。Flexbox布局提供了强大的灵活性和可扩展性，可以很方便地操作元素的对齐方式和布局。

以下是一种实现表头居中对齐的方法：

.mat-header-cell {
  display: flex;
  align-items: center;
  justify-content: center;
}

在上面的代码中，我们使用了.mat-header-cell选择器来选中表头单元格元素。然后，我们使用display: flex将表头单元格元素设置为flex容器。接下来，我们使用align-items: center和justify-content: center使表头单元格元素在垂直和水平方向上居中对齐。

下面是一个具体示例：

<mat-table>
  <ng-container matColumnDef="name">
    <mat-header-cell *matHeaderCellDef class="mat-header-cell">姓名</mat-header-cell>
    <mat-cell *matCellDef="let element">{{element.name}}</mat-cell>
  </ng-container>

  <ng-container matColumnDef="age">
    <mat-header-cell *matHeaderCellDef class="mat-header-cell">年龄</mat-header-cell>
    <mat-cell *matCellDef="let element">{{element.age}}</mat-cell>
  </ng-container>

  <mat-header-row *matHeaderRowDef="columns; sticky: true"></mat-header-row>
  <mat-row *matRowDef="let row; columns: columns;"></mat-row>
</mat-table>

在上面的代码中，我们使用了class="mat-header-cell"将表头单元格元素添加了一个自定义的类名，然后在CSS中使用了这个类名来对表头进行样式调整。这样，所有具有.mat-header-cell类名的表头单元格元素都会应用上述CSS样式。