How to align h2 within a nested div? - html

Question

I'm trying to align the text within my h2 element. I would like it to be centered vertically within the div. I'm working in .NET MVC
My html: (this is the only part giving me trouble)
Specifically:
.banner-side-container {
height: 240px;
width: 180px;
vertical-align: middle;
}
.banner-side-container h2 {
margin: 0;
padding: 0;
text-align: center;
}
.view-teams-banner {
margin-top: 10px;
height: 110px;
width: 180px;
background-color: aqua;
border-radius: 20px;
}
.view-matches-banner {
margin-top: 10px;
height: 110px;
width: 180px;
background-color: darkorchid;
border-radius: 20px;
}
<td>
<div class="banner-side-container">
<div class="view-teams-banner">
<h2>View Teams</h2>
</div>
<div class="view-matches-banner">
<h2>View Matches</h2>
</div>
</div>
</td>
I've tried adding vertical-align: middle; to all 4 selectors with no success.
Further info: the text-align: center; worked perfectly.

Answer 1

You can use flex and add the following settings to the three elements wrapping the h2s and their parent elements as follows:
display: flex;
flex-direction: column;
justify-content: center;
.banner-side-container {
height: 240px;
width: 180px;
display: flex;
flex-direction: column;
justify-content: center;
}
.banner-side-container h2 {
margin: 0;
padding: 0;
text-align: center;
}
.view-teams-banner {
margin-top: 10px;
height: 110px;
width: 180px;
background-color: aqua;
border-radius: 20px;
display: flex;
flex-direction: column;
justify-content: center;
}
.view-matches-banner {
margin-top: 10px;
height: 110px;
width: 180px;
background-color: darkorchid;
border-radius: 20px;
display: flex;
flex-direction: column;
justify-content: center;
}
<td>
<div class="banner-side-container">
<div class="view-teams-banner">
<h2>View Teams</h2>
</div>
<div class="view-matches-banner">
<h2>View Matches</h2>
</div>
</div>
</td>