如何在Angular Material中实现mat-expansion-panel内容居中显示

问题原因 #

• align-content、align-items属于flex布局专属属性，未给父元素声明display: flex时属性不会生效
• Angular Material 自带的mat-expansion-panel内容容器默认左对齐，原有自定义样式未命中生效逻辑
• 无需优先使用!important，调整选择器和属性逻辑即可解决问题，避免污染全局样式

方案1：仅当前面板内容居中（推荐，不影响其他组件） #

直接修改自定义的.centered-content样式即可，无需覆盖框架自带类，HTML代码无需调整：

.centered-content {
  /* 仅需要文本水平居中使用这一行即可 */
  text-align: center;
  /* 如果需要同时垂直+水平居中非文本类内容，启用下方flex配置 */
  /*
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  */
}

方案2：全局所有展开面板内容居中 #

如果需要让项目中所有mat-expansion-panel的内容默认居中，可以覆盖框架自带的.mat-expansion-panel-body类：

写在组件样式文件中 #

需要添加::ng-deep前缀关闭Angular视图封装，才能命中组件内的框架类：

::ng-deep .mat-expansion-panel-body {
  text-align: center;
  /* 按需调整默认内边距，框架默认值为 0 24px 16px */
  /* padding: 16px 0; */
}

写在全局样式文件（styles.css）中 #

直接添加样式即可，无需额外前缀：

.mat-expansion-panel-body {
  text-align: center;
}

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