title: Centre aligning a div with flex-layout
body: <p>I currently have a component which looks like:</p>
  
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
    selector: 'home-about',
    template: `
      &lt;div
        fxFlex="50"
        fxLayout="column"
        fxLayoutAlign="center"
      &gt;
        &lt;div&gt;
          &lt;h2&gt;About This Site&lt;/h2&gt;
        &lt;/div&gt;
        &lt;p&gt;
      TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
      TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
      TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
      TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
        &lt;/p&gt;
      &lt;/div&gt;
    `
  })
  export class HomeAboutComponent {}
  </code></pre>
  
  <p>Which produces this:
  <a href="https://i.stack.imgur.com/BiF1L.png" rel="noreferrer"><img src="https://i.stack.imgur.com/BiF1L.png" alt="enter image description here"></a></p>
  
  <p>The look I am after is this:
  <a href="https://i.stack.imgur.com/x29V9.png" rel="noreferrer"><img src="https://i.stack.imgur.com/x29V9.png" alt="enter image description here"></a></p>
  
  <p>I centered the above text on the page by applying a style class:</p>
  
  <pre><code>  styles: [`
      .aboutContainer {
        margin: 0 auto;
      }
    `],
  </code></pre>
  
  <p>Adding a CSS class seems a bit too much, I should be able to centre the <code>div</code> and set a <code>flex</code> to <code>50%</code> all with flex-layout. I'm just not too sure where i'm going wrong.</p>