How to center text in CSS Grid?

Question

On this 6x6 grid I created, I added titles to each div but right now they are aligned to the bottom left of each div. How can I go about centering them inside of each div and also making them responsive too so that they do not move position depending on screen sizes? I have added my current code to this post to show you. Thank you for your help in advance!

.wrapper {
 max-width: 1200px;
 margin: 0 auto;
}

.wrapper>div {
 padding: 7em;
 color: white;
}

.wrapper {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 grid-gap: 30px;
 grid-auto-rows: minmax(100px, auto);
}

.one {
 grid-column: 1;
 grid-row: 1;
 background-image: url('http://via.placeholder.com/350x150');
 position: relative;
    background-size: cover;

}

.one span {
 position: absolute;
 bottom: 2px;
 left: 5px;
    text-shadow: 2px 2px black;
}

.two {
 grid-column: 2;
 grid-row: 1;
 background-image: url('http://via.placeholder.com/350x150');
    position: relative;
    background-size: cover;

}

.two span {
 position: absolute;
    bottom: 2px;
    left: 5px;
    color: white;
    text-shadow: 2px 2px black;
}

.three {
 grid-column: 3;
 grid-row: 1;
 background-image: url('http://via.placeholder.com/350x150');
    position: relative;
    background-size: cover;
    
}

.three span {
 position: absolute;
    bottom: 2px;
    left: 5px;
    color: white;
    text-shadow: 2px 2px black;
}
.four {
 grid-column: 1;
 grid-row: 2;
 background-image: url('http://via.placeholder.com/350x150');
 position: relative;
    background-size: cover;

}

.four span {
 position: absolute;
 bottom: 2px;
 left: 5px;
    text-shadow: 2px 2px black;
}

.five {
 grid-column: 2;
 grid-row: 2;
 background-image: url('http://via.placeholder.com/350x150');
    position: relative;
    background-size: cover;

}

.five span {
 position: absolute;
    bottom: 2px;
    left: 5px;
    color: white;
    text-shadow: 2px 2px black;
}

.six {
 grid-column: 3;
 grid-row: 2;
 background-image: url('http://via.placeholder.com/350x150');
    position: relative;
    background-size: cover;
    
}

.six span {
 position: absolute;
    bottom: 2px;
    left: 5px;
    color: white;
    text-shadow: 2px 2px black;
}


/*HOVER*/
.one:hover {
 opacity: .6;
}

.two:hover {
 opacity: .6;
}

.three:hover {
 opacity: .6;
}

.four:hover {
 opacity: .6;
}

.five:hover {
 opacity: .6;
}

.six:hover {
 opacity: .6;
}

@media only screen and (max-width: 768px) {
 .wrapper {
  display: block;
 }
 .margin-bot {
  margin-bottom: 2px;
 }
}

<div class="wrapper">

 <div onclick="location.href='from-the-editors-desk.html';" style="cursor: pointer;" class="one margin-bot">
  <span>title here</span>
 </div>

 <div onclick="location.href='challenging-the-chippewas.html';" style="cursor: pointer;" class="two margin-bot">
        <span>title here</span>
    </div>
    
    <div onclick="location.href='challenging-the-chippewas.html';" style="cursor: pointer;" class="three margin-bot">
        <span>title here</span>
    </div>
    
    <div onclick="location.href='challenging-the-chippewas.html';" style="cursor: pointer;" class="four margin-bot">
        <span>title here</span>
    </div>
    
    <div onclick="location.href='challenging-the-chippewas.html';" style="cursor: pointer;" class="five margin-bot">
        <span>title here</span>
    </div>
    
    <div onclick="location.href='challenging-the-chippewas.html';" style="cursor: pointer;" class="six margin-bot">
        <span>title here</span>
    </div>