Angular 材质/CSS 中心卡片内容 [重复]

Question

我正在尝试将 angular material card 中的文本居中，目前它水平居中，但我希望它垂直居中

HTML：

<mat-card class="card-initials">
    <div>
      BD
    </div>
</mat-card>

CSS：

.card-initials{
    width: 200px;
    height: 200px;
    float: right;
    margin: 15px;
}

.card-initials div{
    width: inherit;
    height: inherit;
    display: flex;
    justify-content: center;
    align-content: center;
}

这是它目前的样子：

Answer 1

添加align-items:center

.card-initials div{
    width: inherit;
    height: inherit;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items:center
}

https://jsfiddle.net/hvzeq4jr/1/

Answer 2

你可以使用line-height:200px:

.card-initials div{
    width: inherit;
    height: inherit;
    display: flex;
    justify-content: center;
    align-content: center;
    line-height:200px;
}

https://jsfiddle.net/ajthomascouk/hvzeq4jr/