我正在尝试将我的徽标修复在导航栏的中心答案

【问题标题】：I'm trying to fix my logo in the center of the navbar我正在尝试将我的徽标修复在导航栏的中心
【发布时间】：2020-03-31 00:15:11
【问题描述】：

Mobile View
Desktop view

我正在制作一个导航栏，我想将我的徽标固定在导航栏的中心。我以某种方式做到了，但是当我进入移动屏幕时，徽标并不完全位于中心，当我按下汉堡菜单时，徽标会向下移动。
我该如何解决它，请帮助我？

<nav class="navbar navbar-expand-lg navbar-light sticky-top" style="background-color:transparent">
  <div class="container-fluid">
    <a class="navbar-brand neon" routerLink="/home">Shams Ali</a>
    <img class="img-fluid mr-auto logo" src="assets/logo.png"/>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto ">
        <li class="nav-item active">
          <a class="nav-link neon" routerLink="/home">Home</a>
        </li>
        <li class="nav-item active">
          <a class="nav-link neon" routerLink="/project">Projetcs</a>
        </li>
        <li class="nav-item active">
          <a class="nav-link neon" routerLink="/about">About Me</a>
        </li>
        <li class="nav-item active">
          <a class="nav-link neon" routerLink="/contact">Contact Me</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

.logo {
  margin: 0 auto;
  display: block;
  position: fixed;
  left: calc((100% - 195px) / 2);
  z-index: 100000;
}

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

其实你只需要设置一个顶部位置：

CSS：

.logo {
  margin: 0 auto;
  display: block;
  position: fixed;
  left: calc((100% - 195px) / 2);
  z-index: 100000;
  top: 15px;
}

小提琴：https://www.codeply.com/p/5Cq8gytisY

【讨论】：

【解决方案2】：

尝试将其添加到您的样式中：

.center {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

【讨论】：