Position Text in Center

Question

I have bootstrap 5 and trying to display text when hover on image. I have my HTML code like below

<div class="slider-img">
    <img src="https://via.placeholder.com/500x500/" data-src="https://via.placeholder.com/500x500/" class="img-fluid h-100 lzy_img" width="100%" height="100%" alt="Latest English Status Shayari">
                    <div class="overlay">
                        <a class="link-bold" href="en/">English Status</a>
                    </div>
                </div>

and CSS like

.slider-img {
  position: relative;
  border-radius: 10px;
}
.overlay {
    position: absolute;
    border-radius: 10px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    text-align: center;
    background: rgb(0,0,0,.8);
    color: #fff;
    width: 100%;
    transition: .5s ease;
    opacity: 0;
    color: #fff;
    font-size: 20px;
    padding: 20px;
    min-height: 100%;
}

I want my text to stay in center of box but its always showing on top like this

I am new in CSS and not getting idea whats I am missing in it. Let me know if someone here can help me for same.

Thanks!