<p>我正在使用一个模板来构建网站（https://github.com/learning-zone/website-templates/tree/master/victory-educational-institution-free-html5-bootstrap-template），原始的导航栏看起来像这样：</p> <p>在缩小之前： 导航栏</p> <p>在缩小之后： 导航栏</p> <p>我把logo改成了我的logo。因为我的logo垂直较小，所以我把边距从10px改为20px</p> <pre class="brush:php;toolbar:false;">.logo { width: 40%; margin: 20px 0px 20px 0; }</pre> <p>它看起来像居中了： 导航栏</p> <p>但是当我向下滚动页面时，导航栏会缩小，我的logo不会保持垂直居中。它会上移。 导航栏</p> <p>我试图修复css，但是没有效果</p> <pre class="brush:php;toolbar:false;">.logo { display: flex; justify-content: center; align-items: center; width: 40%; margin: 20px 0px 20px 0; }</pre> <p>这是logo的html代码</p> <pre class="brush:php;toolbar:false;">&lt;div class="logo smooth-scroll"&gt; &lt;a href="#banner"&gt;&lt;img id="logo" src="images/boxinghub.png" alt="boxinghub logo"&gt;&lt;/a&gt; &lt;/div&gt;</pre> <p>css中的代码控制了缩小时的位置，但是即使我添加了.logo或#logo，也没有帮助。</p> <pre class="brush:php;toolbar:false;">@media (min-width:768px) { .fixed-header-on .navbar-default .navbar-nav &gt; li &gt; a { padding-top: 20px; padding-bottom: 20px; } }</pre> <p>提前感谢您的帮助！</p>