如何居中Angular的mat-expansion-panel组件？

你之前设置的text-align: center仅能让面板内部内容居中，无法让面板本身在父容器中水平居中。以下是几种可行的解决方法：

方法一：内联样式添加margin:auto #

给mat-expansion-panel添加margin: 0 auto，利用块级元素的margin自动分配特性实现面板居中：

<mat-expansion-panel [expanded]="Expand" style="width: 80%; margin: 0 auto; text-align: center">
  <mat-expansion-panel-header>
    <mat-panel-title style="text-align: center"> Test </mat-panel-title>
  </mat-expansion-panel-header>
</mat-expansion-panel>

方法二：父容器flex布局包裹 #

若需要同时控制多个元素的居中效果，可在面板外层套一个容器，通过flex布局实现：

<div style="display: flex; justify-content: center; width: 100%">
  <mat-expansion-panel [expanded]="Expand" style="width: 80%; text-align: center">
    <mat-expansion-panel-header>
      <mat-panel-title style="text-align: center"> Test </mat-panel-title>
    </mat-expansion-panel-header>
  </mat-expansion-panel>
</div>

方法三：组件样式类（推荐） #

避免内联样式冗余，在组件CSS中定义专用样式类：

.center-expansion-panel {
  width: 80%;
  margin: 0 auto;
  text-align: center;
}

在HTML中引用该类：

<mat-expansion-panel [expanded]="Expand" class="center-expansion-panel">
  <mat-expansion-panel-header>
    <mat-panel-title> Test </mat-panel-title>
  </mat-expansion-panel-header>
</mat-expansion-panel>

注意：如果组件启用了默认视图封装，直接在组件样式中修改mat-expansion-panel样式可能不生效，此时可将样式放到全局styles.css中，或使用::ng-deep（不推荐长期依赖）。

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