title: How to center horizontally material stepper by flex-layout?
body: <p>I try to use in my project only flex-layout and avoid vanilla css. I cannot figure out how to center hohorizontally angular material stepper and get good view. I check <code>margin: 0 auto;</code> and it works properly. Here is my code:</p>
  
  <pre><code>&lt;mat-vertical-stepper [linear]="true" #stepper fxLayoutAlign="center center" fxLayout="column"&gt;
    &lt;mat-step&gt;
      &lt;form&gt;
        &lt;ng-template matStepLabel&gt;
          Fill out ballot name
        &lt;/ng-template&gt;
        &lt;mat-form-field&gt;
          &lt;input matInput placeholder="Ballot name"&gt;
        &lt;/mat-form-field&gt;
        &lt;div&gt;
          &lt;button mat-flat-button matStepperNext&gt;Next&lt;/button&gt;
        &lt;/div&gt;
      &lt;/form&gt;
    &lt;/mat-step&gt;
  
    &lt;mat-step&gt;
      &lt;form fxLayout="column"&gt;
        &lt;ng-template matStepLabel&gt;
          Select start and end time
        &lt;/ng-template&gt;
        &lt;mat-form-field&gt;
          &lt;input matInput [matDatepicker]="pickerStart" placeholder="Choose a start date"&gt;
          &lt;mat-datepicker-toggle matSuffix [for]="pickerStart"&gt;&lt;/mat-datepicker-toggle&gt;
          &lt;mat-datepicker #pickerStart&gt;&lt;/mat-datepicker&gt;
        &lt;/mat-form-field&gt;
        &lt;mat-form-field&gt;
          &lt;input matInput [matDatepicker]="pickerEnd" placeholder="Choose a end date"&gt;
          &lt;mat-datepicker-toggle matSuffix [for]="pickerEnd"&gt;&lt;/mat-datepicker-toggle&gt;
          &lt;mat-datepicker #pickerEnd&gt;&lt;/mat-datepicker&gt;
        &lt;/mat-form-field&gt;
        &lt;div fxLayoutGap="5px"&gt;
          &lt;button mat-flat-button matStepperPrevious&gt;Back&lt;/button&gt;
          &lt;button mat-flat-button matStepperNext&gt;Next&lt;/button&gt;
        &lt;/div&gt;
      &lt;/form&gt;
    &lt;/mat-step&gt;
  
    &lt;mat-step&gt;
      &lt;form&gt;
        &lt;ng-template matStepLabel&gt;
          Enter a description of ballot
        &lt;/ng-template&gt;
        &lt;mat-form-field&gt;
          &lt;textarea matInput placeholder="Description"&gt;&lt;/textarea&gt;
        &lt;/mat-form-field&gt;
        &lt;div fxLayoutGap="5px"&gt;
          &lt;button mat-flat-button matStepperPrevious&gt;Back&lt;/button&gt;
          &lt;button mat-flat-button (click)="stepper.reset()"&gt;Reset&lt;/button&gt;
          &lt;button mat-flat-button&gt;Confirm&lt;/button&gt;
        &lt;/div&gt;
      &lt;/form&gt;
    &lt;/mat-step&gt;
  &lt;/mat-vertical-stepper&gt;
  </code></pre>
  
  <p>Screenshot of the problem:</p>
  
  <p><a href="https://i.stack.imgur.com/dU85V.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dU85V.png" alt="enter image description here"></a></p>