How to center a burger icon vertically inside a div?

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"> <a href="#"><img src="" alt='Logo' /></a> </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"> <a href="#"><img src="" alt='Logo'/></a> </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"> <a href="#"><img src="" alt='Logo' /></a> </div> <a href="#">another link ? </a> <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>