How to center a burger icon vertically inside a div? - html

Question

I have a navigation menu that contains a burger icon made with 3 <span> that is inside another elements :
.navbar {
width: 100%;
color: #fff;
background-color: #df0024;
padding: 1% 0;
}
.tog {
display: flex;
cursor: pointer;
float: right;
width: 6%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
align-items: center;
justify-content: center;
height: auto;
}
/*This is the div that contain the burger 3 layers*/
#nav-icon {
height: -webkit-fill-available;
height: -moz-fill-available;
height: -o-fill-available;
height: fill-available;
position: relative;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
/*/The style of each of the burger icon 3 layers*/
#nav-icon span {
display: block;
position: absolute;
height: 3.1vh;
width: 100%;
background: white;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav-icon span:nth-child(1) {
top: 0px;
}
#nav-icon span:nth-child(2) {
top: 12px;
}
#nav-icon span:nth-child(3) {
top: 24px;
}
<nav class="navbar">
<div class="logo">
<img src="" alt='Logo' />
</div>
<div id='tog' class="tog">
<label for="toggle" id='nav-icon'>
<div class='icon-container'>
<span></span>
<span></span>
<span></span>
</div>
</label>
</div>
</nav>
How to center the #nav-icon span inside the #nav-icon vertically ? All I want is centering the burger icon so I don't care of changing the other elements style that contain the burger icon.

Answer 1

I had to tweak a lot to make this work, but I used a nice vertical-centering trick I know involving top: 50%; plus transition: translateY(-50%);. If you apply those to a child div then it will be vertically centered within a sized parent (the parent should also have position relative or absolute).
I applied these styles to the .icon-container in your code.
.navbar{
width: 100%;
position: relative;
color: #fff;
background-color: #df0024;
padding: 1% 0;
}
.tog {
display: flex;
cursor: pointer;
float: right;
width: 6%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
align-items: center;
justify-content: center;
height: auto;
}
/*This is the div that contain the burger 3 layers*/
#nav-icon{
position: absolute;
top:0;
bottom:0;
left:0;
right: 0;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
.icon-container {
padding: 0 5px;
box-sizing: border-box;
position: relative;
top: 50%;
-ms-transform: translateY(-50%); /* IE 9 */
-webkit-transform: translateY(-50%); /* Chrome, Safari, Opera */
transform: translateY(-50%);
}
#nav-icon span{
display: block;
width: 100%;
height: 5px;
margin-bottom: 3px;
background: white;
border-radius: 9px;
opacity: 1;
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
<nav class="navbar">
<div class="logo">
<img src="" alt='Logo'/>
</div>
<div id='tog' class="tog">
<label for="toggle" id='nav-icon'>
<div class='icon-container'>
<span></span>
<span></span>
<span></span>
</div>
</label>
</div>
</nav>

Answer 2

If you have nothing against flex, you may also drop the absolute positionning.
.navbar {
display: flex;
align-items: center;/* vertical-centering */
color: #fff;
background-color: #df0024;
padding: 1% 0;
/* DEMO PURPOSE ONLY to show vertical centering */
transition:0.25s;
height: 100px;
background-image:linear-gradient(to top, transparent 50%, rgba(255,255,255,0.15) 50%);
}
.navbar:hover {height:200px;}
/* end -- DEMO PURPOSE ONLY to show vertical centering */
nav a {
/* demo purpose , useless about centering */
margin: 0 0.5em;
color: white;
}
.tog {
cursor: pointer;
width: 1.5em;
margin-left: auto;/* goes all the way to the right side */
}
/*This is the div that contain the burger 3 layers*/
#nav-icon {
display: block;
transform: rotate(0deg);
transition: .5s ease-in-out;
cursor: pointer;
}
/*The style of each of the burger icon 3 layers*/
#nav-icon span {
display: block;
background: white;
margin: 0.25em 0;
border-radius: 9px;
opacity: 1;
height: 0.25em;
transform: rotate(0deg);
transition: .25s ease-in-out;
box-shadow: 1px 1px 1px;
}
<nav class="navbar">
<div class="logo">
<img src="" alt='Logo' />
</div>
another link ?
<div id='tog' class="tog">
<label for="toggle" id='nav-icon'>
<div class='icon-container'>
<span></span>
<span></span>
<span></span>
</div>
</label>
</div>
</nav>