Html 无法将导航栏列表项居中放置在导航栏列表中

下面是我的标题的外观：

如您所见，黄色框不在红色框的中心。如何将其置于中心位置

我的代码片段如下所示：

Header.js

import React from "react";

const Header = () => {
  return (
    <header>
      <nav>
        <ul className="navbar-list">
          <li className="navbar-list-item">Register/Login</li>
        </ul>
      </nav>
    </header>
  );
};

export default Header;

GIT存储库

---

试试这种方法。此外，您还需要从引导设置边距底部，这需要被覆盖

nav{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0;
}

---

给你的导航一个高度，比如说50像素

现在将其添加到

.navbar列表中

：

margin:0；位置：相对位置；最高：50%；转换：翻译（0，-50%）

这基本上抵消了元素的顶部位置，然后将其向上凸起50%的高度，使其垂直居中。
我想你还有其他干扰-当我只复制css和html（不在react设置中使用）时，
已经垂直居中了嗯，那么会有什么问题呢？我不知道没有看到其余的设置，但如果你隔离css和html，它似乎是好的，所以可能你有其他css在某处发生冲突？我没有任何其他css，除了
index.css
中的基本字体设置。你在使用什么浏览器？我使用的是chrome浏览器，它显示在标签上有一个边距设置为浏览器默认值，因此在另一个浏览器上可能会显示不同的边距。我会做以下的。。。为您的计算机指定一个指定的高度并设置边距：0；在
上，将以下内容添加到垂直中心。。。。保证金：0；位置：相对位置；最高：50%；转换：翻译（0，-50%）；试试看，我想把
导航栏列表
放在
导航栏列表
的中心位置，而不是放在
导航栏列表
的中心位置。在这种情况下，您可以对导航栏列表做同样的操作。编辑我的回答我已经试过了。不走运。其他东西正在干扰你的CSS。我用你的代码创建了这个沙盒，它似乎工作得很好：似乎也不是浏览器的问题。检查开发人员控制台中是否有内容被覆盖
nav{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0;
}