网格列表的垂直对齐方式

Question

我正在使用角度6.0.9

我想创建一个非常简单的布局：

• 在页面的顶部，有两个选项卡供您选择是创建项目还是查看现有项目。
• 创建项目是一种简单的形式
• 查看项目是两行视图：在项目列表的左侧，在右边的面板上，当在左侧列表中选择了某些内容时，该面板会随项目详细信息更新。

这是我的布局的样子：

<mat-tab-group>
    <mat-tab>
        <ng-template mat-tab-label>View items</ng-template mat-tab-label>
        <!-- This list is for the 2 columns layout -->
        <mat-grid-list  cols="2" rowHeight="1:1" gutterSize="0">
            <!-- Firt column: the list of items -->
            <mat-grid-tile>
                <!-- Just to have some fancy borders around the item list, I put it in a mat-card -->
                <mat-card>
                    <!-- List of items -->
                    <mat-list>
                        <mat-list-item *ngFor="let item of items">
                            ...
                        </mat-list-item>
                    </mat-list>
                </mat-card>
            </mat-grid-tile>
            <!-- Second column: selected item details -->
            <mat-grid-tile>
                <!-- The details of the item -->
                <mat-card>
                    ...
                <mat-card>
            </mat-grid-tile>
        </mat-grid-list>
    </mat-tab>
    <mat-tab>
        <ng-template mat-tab-label>Create item</ng-template mat-tab-label>
        ...
    </mat-tab>
</mat-tab-group>

屏幕截图：

我只有以下CSS，我添加了width: 100%，否则这些卡片不会占据整个列宽。

mat-card {
    width: 100%;
}

我有两个问题：

• 首先，列在页面中垂直居中。即，用于项目列表的卡片和用于项目详细信息的卡片并不位于选项卡的正下方，而是位于页面的中间。

• 第二，我不太了解如何使用带角度的材料。比较材质和角度/材质的文档时，我看到材质具有“ mdc-layout-grid-cell-align”，但是我不知道在使用材质/角度时如何使用它！

我尝试在CSS和特定于材料的标记中几乎每个地方都添加layout-align或mdc-layout-grid-cell-align。没有成功。