Centre aligning a div with flex-layout

Question

I currently have a component which looks like:

import { Component } from '@angular/core';

@Component({
  selector: 'home-about',
  template: `
    <div
      fxFlex="50"
      fxLayout="column"
      fxLayoutAlign="center"
    >
      <div>
        <h2>About This Site</h2>
      </div>
      <p>
    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
      </p>
    </div>
  `
})
export class HomeAboutComponent {}

Which produces this:

The look I am after is this:

I centered the above text on the page by applying a style class:

  styles: [`
    .aboutContainer {
      margin: 0 auto;
    }
  `],

Adding a CSS class seems a bit too much, I should be able to centre the div and set a flex to 50% all with flex-layout. I'm just not too sure where i'm going wrong.

Answer 1

`<div fxLayout="column" fxLayoutAlign="center center">
  <div>
    <h2>About This Site</h2>
  </div>
  <p>
     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
  </p>
</div>`

I think this is what you are looking for @Harpal