为什么怎么设置都没办法让这个文字在正中间呀

↑
上面这个是效果图，但是图上选中的这个“斯莱特林”如何才能在正中间呀，而不是像上图这样跑歪了。

下面是我的HTML和css代码
↓

在.cal h3.on加一个line-height:100px

如果不能解决,贴出源码进行修改

    display: flex;
    align-items: center;

height:100px;
line-height:100px;