Центр мат-карт на окне

Question

Я видел сообщение о переполнении стека, вроде ответа на мой вопрос ( Как центрировать мат-карту в angular материалах? ), но результат действительно не идеален (см. Изображение).

Как видите, карты сжимаются и находятся на одной линии. Неважно, что s css я добавляю в карты, это не влияет на них. Я хотел бы, чтобы они были намного больше, и один поверх другого. Я считаю невероятным, что опции s css не проще переместить ваши элементы туда, куда вы хотите ...

Answer 1

Я попробовал ответ, данный в Как центрировать мат-карту в angular материалах? , она работает

Stackblitz

Answer 2

Добавьте center class к тегу mat-card и поместите ниже css.

    .center {
        top   : 20%;
        height: 40%;
        width : 40%;
        margin: 0 auto;
        display: flex;
    }

Если это не применимо в файле s css, тогда поместите :: ng-deep просто префикс .center