Html – Quote Slider Center Absolutely-Positioned Slider

I found a slider here: https://codepen.io/cassidoo/pen/MyaWzp

I have made some minor edits to make it more responsive, however, I am running into an issue. I’d like for the text to be vertically centered within the quote frame. This has an absolute position, so that throws a wrench into things. I know how to vertically center an absolutely positioned item when that item doesn’t have a height set, however since this is animated it has to have that height. Not sure what should be tweaked in order to get the text vertically centered. If I set the height, it looks good on smaller screens or larger screens, because I can optimize my css for either. However, I’d like it to adjust when I resize the browser, so it’s always centered vertically regardless of the window. Also, the quotes maybe be large or small, so something that can adjust to the height of the item would work better. Not sure if there is a way to tweak what I have or if there is another script more suited for something like this.

The HTML:

<div class="content-slider">
    <div class="slider">
        <div class="mask">
            <ul>
                <li>
                    <h1>"The only way to prove that you’re a good sport is to lose."</h1>
                    <p>- Ernie Banks</p>
                </li>
                <li>
                    <h1>"Champions keep playing until they get it right."</h1>
                    <p>- Billie Jean King</p>
                </li>
                <li>
                    <h1>"You miss 100% of the shots you don’t take."</h1>
                    <p>- Wayne Gretzky</p>
                </li>
                <li>
                    <h1>"Success is where preparation and opportunity meet."</h1>
                    <p>- Bobby Unser</p>
                </li>
                <li>
                    <h1>"Sports do not build character. They reveal it."</h1>
                    <p>- Heywood Broun</p>
                </li>
            </ul>
        </div>
    </div>
</div>

The CSS:

.content-slider {
    align-items: center;
    background: #cb2026;
    display: flex;
    justify-content: center;
}

.slider,
.slider li {
    max-width: 900px;
    width: 100%;
}

.slider {
    overflow: visible;
    position: relative;
}

.content-slider,
.slider,
.slider li,
.mask {
    height: 170px;
}

.mask {
    overflow: hidden;
}

.slider ul {
    list-style-type: none;
    position: relative;
}

.slider li {
    top: -325px;
    position: absolute;
}

.slider h1 {
    color: #fff;
    font-size: 25px;
    font-weight: 500;
    line-height: 35px;
    padding: 20px 20px 0;
    text-align: center;
}

.slider p {
    color: #fff;
    font-size: 18px;
    padding: 20px;
    text-align: right;
}

.slider li:nth-child(1) {
    animation: cycle 15s linear infinite;
}

.slider li:nth-child(2) {
    animation: cycle2 15s linear infinite;
}

.slider li:nth-child(3) {
    animation: cycle3 15s linear infinite;
}

.slider li:nth-child(4) {
    animation: cycle4 15s linear infinite;
}

.slider li:nth-child(5) {
    animation: cycle5 15s linear infinite;
}

.slider:hover li {
    animation-play-state: paused;
}

@keyframes cycle {
    0% {
        top: 0;
    }
    4% {
        top: 0;
    }
    16% {
        top: 0;
        opacity: 1;
        z-index: 0;
    }
    20% {
        top: 325px;
        opacity: 0;
        z-index: 0;
    }
    21% {
        top: -325px;
        opacity: 0;
        z-index: -1;
    }
    50% {
        top: -325px;
        opacity: 0;
        z-index: -1;
     }
     92% {
         top: -325px;
         opacity: 0;
         z-index: 0;
     }
     96% {
         top: -325px;
         opacity: 0;
     }
     100% {
         top: 0;
         opacity: 1;
     }
}

@keyframes cycle2 {
    0% {
        top: -325px;
        opacity: 0;
    }
    16% {
        top: -325px;
        opacity: 0;
    }
    20% {
        top: 0;
        opacity: 1;
    }
    24% {
        top: 0;
        opacity: 1;
    }
    36% {
        top: 0;
        opacity: 1;
        z-index: 0;
    }
    40% {
        top: 325px;
        opacity: 0;
        z-index: 0;
    }
    41% {
        top: -325px;
        opacity: 0;
        z-index: -1;
    }
    100% {
        top: -325px;
        opacity: 0;
        z-index: -1;
    }
}

@keyframes cycle3 {
    0% {
        top: -325px;
        opacity: 0;
    }
    36% {
        top: -325px;
        opacity: 0;
    }
    40% {
        top: 0;
        opacity: 1;
    }
    44% {
        top: 0;
        opacity: 1;
    }
    56% {
        top: 0;
        opacity: 1;
        z-index: 0;
    }
    60% {
        top: 325px;
        opacity: 0;
        z-index: 0;
    }
    61% {
        top: -325px;
        opacity: 0;
        z-index: -1;
    }
    100% {
        top: -325px;
        opacity: 0;
        z-index: -1;
    }
}

@keyframes cycle4 {
    0% {
        top: -325px;
        opacity: 0;
    }
    56% {
        top: -325px;
        opacity: 0;
    }
    60% {
        top: 0;
        opacity: 1;
    }
    64% {
        top: 0;
        opacity: 1;
    }
    76% {
        top: 0;
        opacity: 1;
        z-index: 0;
    }
    80% {
        top: 325px;
        opacity: 0;
        z-index: 0;
    }
    81% {
        top: -325px;
        opacity: 0;
        z-index: -1;
    }
    100% {
        top: -325px;
        opacity: 0;
        z-index: -1;
    }
}

@keyframes cycle5 {
    0% {
        top: -325px;
        opacity: 0;
    }
    76% {
        top: -325px;
        opacity: 0;
    }
    80% {
        top: 0;
        opacity: 1;
    }
    84% {
        top: 0;
        opacity: 1;
    }
    96% {
        top: 0;
        opacity: 1;
        z-index: 0;
    }
    100% {
        top: 325px;
        opacity: 0;
        z-index: 0;
    }
}

Any help is appreciated!

Thanks,
Josh