如何在CSS Grid中居中文本？

Question

在我创建的这个6x6网格上，我为每个div添加了标题，但现在它们与每个div的左下角对齐。我怎样才能将它们集中在每个div内部并使它们也响应，以便它们不会根据屏幕尺寸移动位置？我已将此当前代码添加到此帖子中以向您展示。感谢您的帮助！

.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>