Can't vertical align multiple lines without huge line gaps

I have a JS MixItUp, and I have it in text boxes, but I can't seem to get it to get multiple lines in a box, vertically aligned, and stay within the element.

To vertically align, I need to set the line-height and set vertical-align to middle.

I set the line-height to the size of the box (45px).

In this this CodePen, you can see the problem on the bottom boxes - the words go right out of the box.

.courses span {
    border: 1px solid white;
    color: black;
    display: grid;
    font-size: 11px;
    height: 45px;
    background: #ffffff;
    border: 2px solid #505050;
    line-height: 45px;
    vertical-align: middle;
    margin: 4px 0;
    -webkit-transition: all .4s ease;
            transition: all .4s ease;
}

I also tried following a vertical alignment example CodePen, but the single line would be at the top of the box.

Some changes in css code.

Try this updated codepen:- https://codepen.io/bhuwanb9/pen/zwMJWj

.courses li {
    text-align: center;
    font-size: 14px;
    width: 19%;
    margin: 0.5%;
    background: #ffffff;
    border: 2px solid #505050;
    position:relative;
    height: 65px;
    box-sizing:border-box;
 }

 .courses span {
    color: black;
    font-size: 11px;
    line-height: normal;
    position:absolute;
    -webkit-transition: all .4s ease;
    transition: all .4s ease;
    transform: translateY(-50%);
    top:50%;
 }