keeping a div centered within a BG image in CSS - html

Question

The issue im having is I'm struggling to keep my riot games text fluid, when i resize my browser it seems like it's stuck where it's at. either the left side or the right, usually the right side has more space from the end of the S to the side of the window.
// The showcase is just the container
// containing the background image.
.showcase {
position: relative;
width: 100%;
height: 35.76em;
text-align: center;
background: url(https://www.riotgames.com/darkroom/original/d6120739b8bf25995d5c43e69b9ce85d:bf411966145dd8b6b0f224e372aa27e5/annie.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
// Info Text is The Main Text
// I'm trying to keep centered and fluid **
.info-text {
color:white;
position: absolute;
text-transform: uppercase;
letter-spacing: 1px;
font-family: "Montserrat", sans-serif;
font-size: 6.5em;
font-weight: bold;
margin: 0;
top: 15%;
left: 25%;
}
// I just ended up adding in the flex-box properties hoping to fix it,
// but im not too sure if it made things worse or actually helped out.
#media only screen and (max-width: 768px) {
.grid {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: center;
}
.info-text {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
height: 25vh;
margin: 0;
text-transform: uppercase;
letter-spacing: 1px;
font-family: "Montserrat", sans-serif;
font-size: 3.5em;
font-weight: bold;
top: 38%;
left: 10%;
margin: 0;
}
<section class="showcase">
<div class="welcome-headline">
<h6>Welcome</h6>
</div>
<div class="info-text">
<p>
Riot Games
</p>
</div>
</section>

Answer 1

You can use flexbox for that with this properties on the container (background image in your case):
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
Example:
.showcase {
position: relative;
width: 100%;
height: 35.76em;
text-align: center;
background: url(https://www.riotgames.com/darkroom/original/d6120739b8bf25995d5c43e69b9ce85d:bf411966145dd8b6b0f224e372aa27e5/annie.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
}
.info-text {
color: white;
position: absolute;
text-transform: uppercase;
letter-spacing: 1px;
font-family: "Montserrat", sans-serif;
font-size: 6.5em;
font-weight: bold;
}
#media only screen and (max-width: 768px) {
.info-text {
font-size: 3.5em;
}
}
<section class="showcase">
<div class="welcome-headline">
<h6>Welcome</h6>
</div>
<div class="info-text">
<p>
Riot Games
</p>
</div>
</section>