角度材质/ 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/