How to align h2 within a nested div?

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 h2 s 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>