如何将mat-select组件中mat-option的文本居中对齐？

我需要把嵌套在<mat-select>中的<mat-option>内的文本设置为居中对齐，现有代码如下：

<mat-select #listMenu>
    <mat-option>TEST1</mat-option>
    <mat-option>TEST2</mat-option>
    <mat-option>TEST3</mat-option>
</mat-select>

目标是让下拉选项里的文本居中显示，之前用了不规范的方式实现，现在想找标准的解决方案。

规范解决方案 #

Angular Material的mat-option内部通过.mat-option-text元素承载文本内容，这个元素默认使用flex布局，我们可以通过修改它的flex对齐属性来实现文本居中：

1. 给单个/部分mat-option设置居中

首先给需要居中的mat-option添加自定义类：

<mat-select #listMenu>
    <mat-option class="centered-option">TEST1</mat-option>
    <mat-option class="centered-option">TEST2</mat-option>
    <mat-option class="centered-option">TEST3</mat-option>
</mat-select>

然后在全局样式文件（比如styles.css）或者组件样式中添加CSS规则：

.centered-option .mat-option-text {
  display: flex;
  justify-content: center;
}

注意：如果组件启用了View Encapsulation，需要在样式前添加:host ::ng-deep来穿透封装：

:host ::ng-deep .centered-option .mat-option-text {
  display: flex;
  justify-content: center;
}

2. 全局所有mat-option文本居中

如果希望项目中所有mat-option的文本都居中，直接在全局样式文件中添加：

.mat-option .mat-option-text {
  display: flex;
  justify-content: center;
}

3. 内联样式（不推荐，维护性差）

如果只是临时测试，也可以用内联样式快速实现：

<mat-option style="display: flex; justify-content: center;">TEST1</mat-option>

这些方法都是基于Angular Material组件的内部结构规范调整，不会破坏组件原有逻辑，比直接操作DOM的不规范方式更稳定可靠。

内容的提问来源于stack exchange，提问作者Abdul-Qader Haddad