title: Overlay text centered in mat-progress-spinner on Angular, Material and Flex-Layout
body: <p>I use material and flex-layout in my angular project.  I have a mat-progress-spinner that I would like to center text inside of it. I got it somewhat there using position absolute but my problem is that this does not remain centered on different sized screens.  Here is my code</p>
  
  <p>child.component.html</p>
  
  <pre><code>&lt;div&gt;
    &lt;mat-progress-spinner mode="indeterminate" [strokeWidth]="2" [diameter]="192"&gt;&lt;/mat-progress-spinner&gt;
    &lt;div class="message"&gt;{{ message }}&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>child.component.scss</p>
  
  <pre><code>.mat-progress-spinner {
    display: inline-block;
    vertical-align: middle;
  }
  
  .message {
    position: absolute;
    text-align: center;
    top: 49%;
    left: 44%;
  }
  </code></pre>
  
  <p>This is a child component that is centered in the parent using the following</p>
  
  <p>parent.component.html</p>
  
  <pre><code>&lt;div fxLayout="column" fxLayoutAlign="center center" fxFill&gt;
    &lt;app-child&gt;&lt;/app-child&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Thanks</p>