Is there a more effective way to center the "i" element within this div without using specific pixel margins that adjust based on hover?
Below is my code snippet:
HTML:
<div class="nav-collapse">
<i class="fa fa-bars fa-2x" id="bars"></i>
</div>
CSS:
.nav-collapse {
top: 30px;
right: 30px;
position: fixed;
border-radius: 50%;
width: 50px;
height: 50px;
background-color: white;
z-index:200;
transition: width 0.2s, height 0.2s;
}
.nav-collapse i{
position: absolute;
color: #FFB361;
}
#bars {
margin-left: 11px;
margin-top: 9px;
}
.nav-collapse:hover {
width: 60px;
height: 60px;
}