We want the words in our <mat-header-cell>The Header</mat-header-cell> to be separated in a column and vertically centered.

We also want our <mat-cell>content</mat-cell> content to be horizontally centered.

Approach

The elements are already flex box containers, so within styles.css we just add:

.mat-header-cell {
  flex-direction: column;
  justify-content: center;
}

.mat-cell {
  text-align: center;
  justify-content:center;
}

If you add the mat-sort-header directive it will add additional CSS classes that will override the above CSS.

In this case wrap the header in its own class like this and put the above CSS in the ColumnHeader class:

<div class="ColumnHeader">
    <div>Center</div>
    <div>This</div>
    <div>Header</div>
</div>

Centering Angular Material Data Table Header and Content Cells | Task