你如何将 React-Bootstrap 中的 Navbar 汉堡按钮居中？

Question

首先，我看到this post 试图将其居中。我尝试了解决方案，但没有奏效。由于某种原因，我在这方面找不到任何其他内容。

如果我将导航栏的高度从其默认大小更改（因此它可以将我的徽标保持在适当的大小），导航栏链接和汉堡菜单不再垂直居中。我可以修复链接位置，但我没有做任何事情垂直居中汉堡按钮。这是我从 React-Bootstrap 站点复制的用于导航栏的代码，在响应模式下，汉堡按钮永远不会垂直居中。它转到页面的右上角。这是我从 React-Bootstrap 站点复制的代码...

<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

如何使汉堡菜单按钮垂直居中？

Answer 1

灵活的方法怎么样？
我创建了一个codepen 来展示align-items 和justify-content 的工作原理。我使用这个分配来确保居中的元素在所有情况下都保持居中。

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%;
}