how to evenly center image and text on the page - html

Question

Hi I'm trying to put 3 sections of images and text at the center of the page. I've tried display flex align-items to center, and justify-content to center. justify-content to puts everything to the center of the page, but everything is uneven.
Here is my code
.contact-main-container{
max-height: 100vw;
justify-content: center;
text-align: center;
font-family: 'Rubik', sans-serif;
color: #e0e7ff;
border: 2px solid black;
}
.contact-links-container{
border: solid 1px black;
}
.contact-link{
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 60px;
}
.contact-link img{
width: 100px;
height: 100px;
}
<div className="contact-main-container">
<header>
<h1>Contact Me</h1>
</header>
<div className="contact-links-container">
<section className="contact-link">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/google/google-original.svg" />
<a>rsteward117#gmail.com</a>
</section>
<section className="contact-link">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/github/github-original.svg" />
<a>Github</a>
</section>
<section className="contact-link">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/linkedin/linkedin-original.svg" />
<a>Linkedin</a>
</section>
</div>
</div>

Answer 1

I don't know why you use className your HTML has to be class instead of className. Try to make your html with class then works fine your code.
I don't know which kind of center you want, so I had put 2 snippets.
Here is your updated snippet to be,
Snippet 1 : icons in Vertical
.contact-main-container{
max-height: 100vw;
justify-content: center;
text-align: center;
font-family: 'Rubik', sans-serif;
color: #e0e7ff;
border: 2px solid black;
}
.contact-links-container{
border: solid 1px black;
}
.contact-link{
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 60px;
}
.contact-link img{
width: 100px;
height: 100px;
}
<div class="contact-main-container">
<header>
<h1>Contact Me</h1>
</header>
<div class="contact-links-container">
<section class="contact-link">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/google/google-original.svg" />
<a>rsteward117#gmail.com</a>
</section>
<section class="contact-link">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/github/github-original.svg" />
<a>Github</a>
</section>
<section class="contact-link">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/linkedin/linkedin-original.svg" />
<a>Linkedin</a>
</section>
</div>
</div>
Snippet 2 : icons in Horizontal
.contact-main-container{
max-height: 100vw;
justify-content: center;
text-align: center;
font-family: 'Rubik', sans-serif;
color: #e0e7ff;
border: 2px solid black;
}
.contact-links-container{
border: solid 1px black;
display: flex;
justify-content: center;
align-items: center;
}
.contact-link{
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 60px;
flex-direction:column;
width:100%
}
.contact-link img{
width: 100px;
height: 100px;
margin-bottom:10px
}
<div class="contact-main-container">
<header>
<h1>Contact Me</h1>
</header>
<div class="contact-links-container">
<section class="contact-link">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/google/google-original.svg" />
<a>rsteward117#gmail.com</a>
</section>
<section class="contact-link">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/github/github-original.svg" />
<a>Github</a>
</section>
<section class="contact-link">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/linkedin/linkedin-original.svg" />
<a>Linkedin</a>
</section>
</div>
</div>

Answer 2

the default direction of flexbox is row
you should define in ".contact-link" class:
flex-direction: column;
.contact-main-container{
max-height: 100vw;
justify-content: center;
text-align: center;
font-family: 'Rubik', sans-serif;
color: #e0e7ff;
border: 2px solid black;
}
.contact-links-container{
border: solid 1px black;
}
.contact-link{
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 60px;
flex-direction: column;
}
.contact-link img{
width: 100px;
height: 100px;
}
<div class="contact-main-container">
<header>
<h1>Contact Me</h1>
</header>
<div class="contact-links-container">
<section class="contact-link">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/google/google-original.svg" />
<a>rsteward117#gmail.com</a>
</section>
<section class="contact-link">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/github/github-original.svg" />
<a>Github</a>
</section>
<section class="contact-link">
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/linkedin/linkedin-original.svg" />
<a>Linkedin</a>
</section>
</div>
</div>