Vertical centering of text within block bootstrap button - html

Question

I'm going through freecode camp to learn coding and am working on my personal portfolio page here (https://codepen.io/DerekDenHartigh/pen/ypgvKV) I've got buttons at the top and I'm having a really hard time modifying the text - I had to use HTML h2 element to get the right size font because none of my CSS would apply to it. Now I'd like to vertically center the text but am not sure how. Thanks!
body{
background-color: lightgrey
}
#Banner{
height: 70px;
text-align: center;
border: 5px solid black;
border-radius: 10px;
}
button{
height: 60px;
background-color: grey;
font-size: 20px;
}
button:hover {
background-color: #D2B48C;
color: white;
}
#bAboutMe{
width:calc(100%/3);
background-color: grey;
}
#bProgrammingProficiencies{
width:calc(100%/3);
background-color: grey;
border-left: 5px solid black;
border-right: 5px solid black;
}
#bContcactInfo{
width:calc(100%/3);
background-color: grey;
}
<div class="row" id="Banner">
<div class=column id="bAboutMe">
<button class="btn btn-block"><h2>About Me</h2></button>
</div>
<div class=column id="bProgrammingProficiencies">
<button class="btn btn-block"><h2>Programming Proficiencies</h2></button>
</div>
<div class=column id="bContcactInfo">
<button class="btn btn-block"><h2>Contact Information</h2></button>
</div>
</div>

Answer 1

Your <h2> are applied css bootstrap with margin-top:20px; margin-bottom:10px. U just need to set these two to 0
h2 {
margin:0;
}
or
h2{
margin-top:0;
margin-bottom:0;
}