Централно центриране на div с гъвкаво оформление - ъглово, ъглово-гъвкаво оформление

Понастоящем имам компонент, който изглежда така:

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 {}

Което произвежда това:

Погледът, който следя, е следният:

Насочих горепосочения текст на страницата, като приложих клас на стила:

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

Добавянето на клас CSS изглежда малко прекалено, трябва да мога да центрирам div и задайте a flex да се 50% всички с гъвкаво оформление. Аз просто не съм много сигурен къде ще се объркам.

Отговори:

`<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>`

Мисля, че това е, което търсите @Harpal