Vertically centering navbar-collapse button

Question

I have a navbar with a logo that resizes as the user scrolls down.
This also resizes the navbar, making it shorter.

How do I get the collapse-button (#nav-btn) to center vertically regardless of the height of the navbar?

<nav class="navbar navbar-inverse navbar-toggleable-md fixed-top">

    <button id="nav-btn" class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarDiv"  aria-expanded="false" aria-label="Toggle navigation">
        <span id="hamburger-icon"class="navbar-toggler-icon"></span>
    </button>

    <div class="nav-container text-center">
        <a class="navbar-brand" href="#"><img id="navbar-logo" src="Images/logo.png" style="width:150px"></a>
    </div>
    <div class="collapse navbar-collapse" id="navbarDiv">                           
        <div>
            <ul class="navbar-nav mr-auto text-center">    
                <li class="nav-item">    
                    <a class="nav-link" href="#home" >Home <span class="sr-only">(current)</span></a>   
                </li>  
                <li class="nav-item">    
                    <a class="nav-link" href="#about-us" >About</a>   
                </li>   
                <li class="nav-item">  
                    <a class="nav-link" href="#pricing" >Pricing</a>   
                </li>                                   
            </ul>
        </div>
    </div>                          
</nav>

CSS

/***** NAVBAR *****/


.navbar {
    font-size: 25px;
    padding: 5px;
    padding-left: 8vw;
    background-color: rgba(31, 31, 31, 0.5)
}

.nav-link {
    font-weight: 500;
}


#nav-btn {
    border: 1px solid white;
}

Answer 1

One way you can do it is give the #nav-btn absolute position.

Since it's inside a relative positioned element, it's gonna be absolute positioned relative to it's parent.

Now you can give it top: calc(50% - <half-of-it's-own-height>); it'll position your button in 50% of it's parent and reduce half of it's height to fully vertical align it to center.

example for height 20px:

CSS

#nav-btn {
  position: absolute;
  height: 20px;
  top: calc(50% - 10px);
}