Center Align with CSS Grid - css

Question

I've got a button class="view-more" that I'm trying to center align on the page within my div class="main" but I just cannot get it to move.
I've tried the align-self, content, and items along with justify options but it just stays at the bottom left of the div.
I think my positions might be causing the issue but I'm not sure. I'm still learning and those are throwing me off.
Here is the full main code.
main {
background-color: var(--secondary-color);
height: 1060px;
}
main .videos {
display: grid;
grid-template-columns: 50% 50%;
margin: 5px;
}
main .videos img {
height: 240px;
width: 92%;
margin: 10px 0 0 24px;
box-shadow: 0 4px 8px rgba(0, 0, 0, .4);
z-index: 100;
position: relative;
}
main a {
position: relative;
}
main .videos h4 {
padding: 0;
margin: 15px 0 0 0;
color: var(--light-color);
text-align: center;
font-family: 'Oswald', sans-serif;
font-size: 1.6em;
}
main .videos h4 span {
background-color: rgba(0, 0, 0, 0.1);
padding: 0 10px;
border-radius: 10px;
}
main .videos i {
position: absolute;
color: white;
z-index: 3;
top: 30%;
left: 40%;
box-shadow: 0 4px 8px rgba(0, 0, 0, .8);
border-radius: 100px;
}
main .view-more {
position: absolute;
border-radius: 10px;
background-color: var(--dark-color);
color: var(--hightlight-color);
}
<main>
<h3>Featured Videos</h3>
<div class="videos">
<h4><span>Hands // Tobias Levin</span></h4>
<h4><span>Rise // Virtuoso</span></h4>
<i class="fas fa-play-circle fa-7x"></i><img src="/images/tobias1.jpg" alt="">
<i class="fas fa-play-circle fa-7x"></i><img src="/images/rise.jpg" alt="">
<h4><span>This is Dan and Dave</span></h4>
<h4><span>Super // Chris Webber</span></h4>
<i class="fas fa-play-circle fa-7x"></i><img src="/images/dand.jpg" alt="">
<i class="fas fa-play-circle fa-7x"></i><img src="/images/cwebber.jpg" alt="">
<h4><span>Superhuman // Brian Tudor</span></h4>
<h4><span>Smoke Screen // Jaspas Deck</span></h4>
<i class="fas fa-play-circle fa-7x"></i><img src="/images/bt.jpg" alt="">
<i class="fas fa-play-circle fa-7x"></i><img src="/images/smokescreen.jpg" alt="">
</div>
<button class="view-more">Open The Vault</button>
</main>

Answer 1

Do you mind if the title/everything in the main container is centered? If not, you can simply add text-align center to the container which would center the children. The problem with your code not moving the button is because you added "position absolute" to the button, meaning it will not center relative to its parent, but rather to the window. I removed that position absolute, and the button will now listen to its parent. Does that make sense?
main {
background-color: var(--secondary-color);
height: 1060px;
text-align: center;
}
main .videos {
display: grid;
grid-template-columns: 50% 50%;
margin: 5px;
}
main .videos img {
height: 240px;
width: 92%;
margin: 10px 0 0 24px;
box-shadow: 0 4px 8px rgba(0, 0, 0, .4);
z-index: 100;
position: relative;
}
main a {
position: relative;
}
main .videos h4 {
padding: 0;
margin: 15px 0 0 0;
color: var(--light-color);
text-align: center;
font-family: 'Oswald', sans-serif;
font-size: 1.6em;
}
main .videos h4 span {
background-color: rgba(0, 0, 0, 0.1);
padding: 0 10px;
border-radius: 10px;
}
main .videos i {
position: absolute;
color: white;
z-index: 3;
top: 30%;
left: 40%;
box-shadow: 0 4px 8px rgba(0, 0, 0, .8);
border-radius: 100px;
}
main .view-more {
border-radius: 10px;
background-color: var(--dark-color);
color: var(--hightlight-color);
}
<main>
<h3>Featured Videos</h3>
<div class="videos">
<h4><span>Hands // Tobias Levin</span></h4>
<h4><span>Rise // Virtuoso</span></h4>
<i class="fas fa-play-circle fa-7x"></i><img src="/images/tobias1.jpg" alt="">
<i class="fas fa-play-circle fa-7x"></i><img src="/images/rise.jpg" alt="">
<h4><span>This is Dan and Dave</span></h4>
<h4><span>Super // Chris Webber</span></h4>
<i class="fas fa-play-circle fa-7x"></i><img src="/images/dand.jpg" alt="">
<i class="fas fa-play-circle fa-7x"></i><img src="/images/cwebber.jpg" alt="">
<h4><span>Superhuman // Brian Tudor</span></h4>
<h4><span>Smoke Screen // Jaspas Deck</span></h4>
<i class="fas fa-play-circle fa-7x"></i><img src="/images/bt.jpg" alt="">
<i class="fas fa-play-circle fa-7x"></i><img src="/images/smokescreen.jpg" alt="">
</div>
<button class="view-more">Open The Vault</button>
</main>