Vertical alignment of vertical navbar - html

Question

I need a vertical navbar that will change the icon to text on hover. But for some reason I can't align the icon and text vertically in the center inside the 'a' tag.
Can someone help?
.sidebar{
background-color: #555;
position: fixed;
height: 100%;
width: 100px;
top: 0;
left: 0;
}
.sidebar a{
text-align: center;
display: block;
padding: 20px;
height: 90px;
color: #fff
}
.sidebar a i{
font-size: 24px;
}
.sidebar a b{
font-size: 18px;
display: none;
}
.sidebar a b:hover{
display: block;
}
.sidebar a i:hover{
display: none;
}
<link href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" rel="stylesheet"/>
<header>
<div class="sidebar">
<i class="fas fa-home"></i><b>Home</b>
<i class="fas fa-home"></i><b>About</b>
<i class="fas fa-home"></i><b>Skills</b>
<i class="fas fa-home"></i><b>Works</b>
</div>
</header>

Answer 1

Is that what are you looking for?
If you want to rotate text you can also add
writing-mode: vertical-rl;
.sidebar{
background-color: #555;
position: fixed;
height: 100%;
width: 100px;
top: 0;
left: 0;
}
.sidebar a{
text-align: center;
display: block;
padding: 20px;
height: 90px;
color: #fff
}
.sidebar a i{
font-size: 24px;
}
.sidebar a b{
font-size: 18px;
display: none;
}
.sidebar a:hover b{
display: block;
}
.sidebar a:hover i{
display: none;
}
<link href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" rel="stylesheet"/>
<header>
<div class="sidebar">
<i class="fas fa-home"></i><b>Home</b>
<i class="fas fa-home"></i><b>About</b>
<i class="fas fa-home"></i><b>Skills</b>
<i class="fas fa-home"></i><b>Works</b>
</div>
</header>

Answer 2

I've cancelled padding on sidebar a and added flexbox. Also fixed hovers, I hope it would fix your problem.
.sidebar{
background-color: #555;
position: fixed;
height: 100%;
width: 100px;
top: 0;
left: 0;
}
.sidebar a{
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
height: 90px;
color: #fff
}
.sidebar a i{
font-size: 24px;
}
.sidebar a b{
color: white;
font-size: 18px;
display: none;
}
.sidebar a:hover b{
display: flex;
}
.sidebar a:hover i{
display: none;
}
<link href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" rel="stylesheet"/>
<header>
<div class="sidebar">
<i class="fas fa-home"></i><b>Home</b>
<i class="fas fa-home"></i><b>About</b>
<i class="fas fa-home"></i><b>Skills</b>
<i class="fas fa-home"></i><b>Works</b>
</div>
</header>