Center the content of a mat-expansion-panel in Angular material


I’m trying to center the content of my angular material expansion panel. I initially just tried surrounding my content in a div and style it with align-content: center and align-items: center. But that doesn’t seem to work. The content seems locked on the left side. My guess is there’s some angular material class I need to override the styling with !important. But I’m not sure which.

  align-content: center
  align-content: center
  <!-- #docregion basic-panel -->
  <!-- #docregion hide-toggle -->
  <mat-expansion-panel hideToggle>
    <!-- #enddocregion hide-toggle -->
        This is the expansion title
        This is a summary of the content
    <div class="centered-content">
      <p>This is the primary content of the panel.</p>
  <!-- #enddocregion basic-panel -->



You have to override the mat-expansion-panel-body class. You have to do it with ::ng-deep pseudo-class because of the view encapsulation:

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

Here is the working example:

Answered By – NeNaD

Answer Checked By – Katrina (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.