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

Answer 2

The first parameter to "fxLayoutAlign" aligns the content along the main-axis and main-axis is decided based on "fxLayout" property.

So, if you have fxLayout="column", main-axis becomes "top -> bottom" and setting fxLayoutAlign="center" will make the content centered along the main-axis (vertically) and not horizontally (left -> right).

To center align the content horizontally (left -> right) and set the width of the div to 50%, we need to wrap our content with a div and add fxLayout="row" and then set its fxLayoutAlign="center" and then set fxFlex="50" on the child div.

To display child items top-> down and further center align them (left to right), we'll need to add fxLayout="column" and fxLayoutAlign="start center". (In this case, "start" is the default value along main-axis (top->down in this case as fxLayout is set to column) and center is the value for cross-axis (left -> right)

<div fxLayout="row" fxLayoutAlign="center">
    <div fxFlex="50" fxLayout="column" fxLayoutAlign="start 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>
</div>