How to change the position of text that appears on hovering on the top of images

I am new to CSS and website development and stuck quite often on formatting. I am used a prebuilt theme and customizing it to suit to my client's requirements and I am unable to change the position of text that appears on hovering on the image.

enter image description here

I have added half html code. Can anyone help me with this

I have tried to use float:center, align-text: center in css but nothing is working

.home-category .block-center .inner-top a{
    float:center;/* changed left*/
    left:9px;
  }
.home-category .block-center .inner-top a.frist{
    margin-right:28px;
}
.home-category .block-center .inner-bottom{
    margin-top: 14px;
    float:center;/* changed left*/
}
.home-category .block-right .inner-bottom{
    margin-top: 14px;
}
.home-category .info{
    position:absolute;
    top:50%;
    left:50%; /*removed */
    margin-top:-13px;
}
.home-category .info a{
    color:#fff;
    font-size:0;
    float:center;
    text-transform:uppercase;
    position:relative;
    font-weight:bold;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    white-space:nowrap;
}
.home-category .info a:before{
    float:center;
    content: "";
    height: 0px;
    opacity: 0;
    position: absolute;
    left:50%;
    top: 50%;
    transition: all 0.2s ease-out 0s;
    -webkit-transition: all 0.2s ease-out 0s;
    -moz-transition: all 0.2s ease-out 0s;
    -o-transition: all 0.2s ease-out 0s;
    visibility: hidden;
    width: 0px;
}
/*hover block left*/
.home-category .block-left:hover .info a{

    font-size:128.57%;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    margin-left:-25px;
    margin-top:-13px; 
}
.home-category .block-left:hover .image:before{
    transform: scale(1);
    visibility:visible;
    transition: all 0.3s ease-in-out 0s;
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    opacity:1;
}
.home-category .info a:hover{
    color:#25bce9
}
.home-category .block-left:hover .info a:before{
    transition: all 0.2s ease-out 0s;
    -webkit-transition: all 0.2s ease-out 0s;
    -moz-transition: all 0.2s ease-out 0s;
    -o-transition: all 0.2s ease-out 0s;
    height:150px;
    width:150px;
    visibility:visible;
    opacity:1;
    margin-top:-75px;
    margin-left:-75px;
}

<section class="home-category">
            <div class="container">
                <div class="row"> 
                    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 block block-left">
                        <a href="#" class="image">
                            <img src="images/banner/category/1.png" alt=" Vector vector created by freepik - www.freepik.com"/>
                        </a>
                        <div class="info">
                            <a href="wide_format_print.html" style="justify">Wide Format<br>Printing</a>
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 block block-center">
                        <div class="inner-top">
                            <div class="box-left">
                                <a href="#" class="image frist">
                                    <img src="images/banner/category/2.jpg" alt="<Brochure psd created by freepik - www.freepik.com"/>
                                </a>
                                <div class="info">
                                    <a href="promotion-material.html" style="center">Promotional Material</a>
                                </div>
                            </div>

Solution

You can use display: flex; to center div from the top and left. Use below CSS:

.home-category .info{
    position:absolute;
    top:0%;
    left:0%; 
    margin-top:0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}