Bootstrap vertically center heading div responsively - html

Question

I am trying to vertically center h5 in a div but I want to do it responsively, so those solutions where you set the parent's height to a certain amount of pixels aren't a solution for me.
The h5 with id "channelName" is what I am trying to vertically center in the parent div.
<div class="col-10 text-left channelTab"><h5 id="channelName">Name</h5></div>
#greyBox {
background-color: grey;
}
#title {
color: white;
}
.logo {
max-height: 50px;
max-width: 50px;
border-radius: 50%;
border: 3px solid white;
}
#channelName {
vertical-align: middle;
display: inline-block;
}
#channelRow {
background-color: red;
}
<div class="container-fluid">
<div class="row">
<div class="col-4"></div>
<div id="greyBox" class="col-4 text-center">
<div class="row">
<div class="col-12 text-center">
<h1 id="title">TITLE</h1>
<div class="row" id="channelRow">
<div class="col-2">
<img src="image.png" class="logo"></div>
<div class="col-10 text-left channelTab">
<h5 id="channelName">Name</h5>
</div>
</div>
<div class="col-6">
</div>
</div>
</div>
</div>
</div>
</div>
If this could be done more easily with some more changes to my code, any such tips would be welcome as I am really new to this and still learning.

Answer 1

Add this class to parent of h5 d-flex align-items-center and remove bottom margin of h5
This class (d-flex) will make the display of parent of h5 flex and the align-items-center will vertically center it.
#greyBox {
background-color: grey;
}
#title {
color: white;
}
.logo {
max-height: 50px;
max-width: 50px;
border-radius: 50%;
border: 3px solid white;
}
#channelName {
margin:0;
}
#channelRow {
background-color: red;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-4"></div>
<div id="greyBox" class="col-4 text-center">
<div class="row">
<div class="col-12 text-center">
<h1 id="title">TITLE</h1>
<div class="row" id="channelRow">
<div class="col-2">
<img src="image.png" class="logo"></div>
<div class="col-10 text-left d-flex align-items-center channelTab">
<h5 id="channelName">Name</h5>
</div>
</div>
<div class="col-6">
</div>
</div>
</div>
</div>
</div>
</div>