title: How to align Angular Material 5 Toolbar title center with Flex
body: <p>I'm using Angular Material for my Angular 5 project. I'd like to align the toolbar title to center.</p>
  <p>In <a href="https://material.angular.io/components/toolbar/overview" rel="noreferrer">their docs</a>, they mention:</p>
  <blockquote>
  <p>The toolbar does not perform any positioning of its content. This gives the user full power to position the content as it suits their application.</p>
  <p>A common pattern is to position a title on the left with some actions on the right. This can be easily accomplished with display: flex:</p>
  </blockquote>
  <p>This is what I tried:</p>
  <pre><code>&lt;mat-toolbar color=&quot;primary&quot;&gt;
      &lt;span class=&quot;title-center&quot;&gt;TITLE&lt;/span&gt;
  &lt;/mat-toolbar&gt;
  
  .title-center {
    flex: 1 1 auto;
  }
  </code></pre>
  <p>...but the title is still in the left.</p>
  <p>I tried reading <a href="https://www.w3schools.com/cssref/css3_pr_flex.asp" rel="noreferrer">here</a> about flex, but couldn't figure out what to do.</p>