title: Center Material Table header and its input in Angular
body: <p>I have a problem which is a little different from the other questions asked here about centering the material headers, but so far I can't seem to make the CSS work. </p>
  
  <p>Here's my problem: I want to make the columns aligned on the center along with the input in the ng container which is utilized as a filter for each column. I can't make it work so far, here's my HTML and what I've tried for the CSS.</p>
  
  <pre class="lang-css prettyprint-override"><code>::ng-deep .mat-header-container {
    justify-content: center;
  }
  
  .title-center {
    margin: 0 auto;
  }
  
  td {
    text-align: center;
  }
  
  .mat-cell, .mat-header-cell {
    border: 1px solid grey;
    padding: 5px;
  
  }
  
  .mat-header-cell {
    font-size: 15px;
    height: 50px;
    width: 9%;
    color:black;
    background-color: #f1f1f1;
    display:flex;
    justify-content:flex-end;
  }
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div&gt;
      &lt;table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8"&gt;
        &lt;!-- 1st Column --&gt;
        &lt;ng-container matColumnDef="business_unit"&gt;
          &lt;th mat-header-cell *matHeaderCellDef&gt; Business Unit
            &lt;div&gt;
              &lt;mat-form-field&gt;
                &lt;input matInput class="form-field" [formControl]="business_unitFilter" placeholder=""&gt;
              &lt;/mat-form-field&gt;
            &lt;/div&gt;
          &lt;/th&gt;
          &lt;td mat-cell *matCellDef="let element"&gt; {{element.business_unit}} &lt;/td&gt;
        &lt;/ng-container&gt;
  
        &lt;!-- 2nd Column --&gt;
        &lt;ng-container matColumnDef="name"&gt;
          &lt;th mat-header-cell *matHeaderCellDef&gt;Name
            &lt;br&gt;
              &lt;mat-form-field&gt;
                &lt;input matInput class="form-field" [formControl]="nameFilter" placeholder=""&gt;
              &lt;/mat-form-field&gt;
          &lt;/th&gt;
          &lt;td mat-cell *matCellDef="let element"&gt; {{element.name}} &lt;/td&gt;
        &lt;/ng-container&gt;
        &lt;tr mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/tr&gt;
        &lt;tr mat-row *matRowDef="let row; columns: displayedColumns;"&gt;&lt;/tr&gt;
      &lt;/table&gt;
      &lt;mat-paginator [pageSizeOptions]="[20, 5, 10, 50, 100]" showFirstLastButtons&gt;&lt;/mat-paginator&gt;
  
    &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/lZVhx.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lZVhx.jpg" alt="enter image description here"></a></p>
  
  <p>Here's what my columns look like atm (I'm trying to have the two columns names centered along with the filter input)</p>