How do you center the Navbar hamburger button from React-Bootstrap?

Question

First, I've seen this post on trying to center it. I tried the solution and it didn't work. I can't find anything else on this for some reason.

If I change the height of the Navbar from its default size (so it can hold my logo at a proper size) the navbar links and the hamburger menu are no longer vertically centered. The links position I can fix, but nothing I do vertically centers the hamburger button. This is the code I copied from the React-Bootstrap site for a Navbar, when in responsive mode, the hamburger button is never vertically centered. It goes to the top right of the page. Here is the code I copied from the React-Bootstrap site...

<Navbar collapseOnSelect staticTop>
    <Navbar.Header>
        <Navbar.Brand>
           <img id='headerLogo' src={require("../images/logo.svg")} />
        </Navbar.Brand>
        <Navbar.Toggle />
    </Navbar.Header>
    <Navbar.Collapse>
        <Nav pullRight>
            <NavItem eventKey={1} href="#">Home</NavItem>
            <NavItem eventKey={2} href="#">About</NavItem>
            <NavDropdown eventKey={3} title="Portfolio" id="basic-nav-dropdown" pullRight>
                <MenuItem eventKey={3.1}>Main</MenuItem>
                <MenuItem divider />
                <MenuItem eventKey={3.2}>Photography</MenuItem>
                <MenuItem eventKey={3.3}>Graphic Design</MenuItem>
                <MenuItem eventKey={3.4}>Motion Graphics</MenuItem>
            </NavDropdown>
        </Nav>
    </Navbar.Collapse>
</Navbar>

My SCSS is here

How do I vertically center the hamburger menu button?

Answer 1

How about a flex approach?
I created a codepen to show how the align-items and justify-content works. I use this allot to make sure centred elements stay centred in all cases.

HTML:

<div class="container">
  <div class="button">
    <span class="logo">
      LOGO
    </span>
  </div>
</div>

CSS:

.container {
  align-items: center;
  background: red;
  display: flex;
  height: 100%;
  justify-content: center;
  position: absolute;
  width: 100%;
}

.button {
  align-items: center;
  background: green;
  display: flex;
  justify-content: center;
  height: 50%;
  width: 50%;
}