Выровняйте динамический c компонент по центру страницы

Question

Я создаю страницу, которая выглядит следующим образом:

Вот моя разметка и код:

<p>list sim works</p>
<div class="app-request-view" style="background-color:  #F3F6F8; text-align: center; height: 1005; display: flex;">
<ng-container style="margin: auto;">

<card  *ngFor="let p of [1,2,3,4,5,6,7,8,9]" style="margin-left: 16px; margin-top: 20px;" class="app-request-card" >
    <card-header>
        <card-header-section>
            <span class="card-header-label">Header</span>
        </card-header-section>
    </card-header>
    <main class="card-body--padding">
        Description
    </main>
    <card-footer>
        <card-footer-section [align]="'right'">
            <button [color]="'primary'" [label]="'Add'" [disabled]="'true'"></button>
        </card-footer-section>
    </card-footer>
</card>

</ng-container>
</div>

Css:

.app-request-card {
    border: none;
    max-width: 350px;
    min-width: 250px;
    height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    width: 350px;
}

1. Количество карточек, которые заполняются динамически. Как выровнять эти карточки по центру страницы?

2. Цвет фона применяется только к карточкам, как установить цвет фона на всю страницу?

Answer 1

Можно использовать это css для обертки карт ng-container. добавьте в него класс по вашему желанию и вставьте css в этот класс.

display: flex;
max-width: 1480px;
justify-content: center;
margin: 0 auto;