导航栏边距：自动，不起作用

Question

我有一个简单的html：

<body>
    <header id="cabecalho">
        <nav id="menu">
            <ul>
            <li>Home</li>
            <li>Projects</li>
            <li>Contact</li>
            </ul>
        </nav>
    </header>
</body>

CSS :

<style>
          *{
              padding: 0;
              margin: 0;    
          }
          html{
              width: 100%;
              height: 100%;
          }
          body{
              width: 100%;
              height: 100%;
          }
          header#cabecalho{
            width: 100%;
            height: 5%;
            background-color: rgb(60, 92, 86); 
            overflow: hidden;
          }
          nav#menu{
            display: block;
            height: 50%;
            width: 100%;
            overflow: hidden;
            margin-top: auto;
            margin-bottom: auto;
          }
          nav#menu ul{
            height: 100%;
            width: 100%;
            list-style: none;
          }
          nav#menu ul li{
              display:inline-block;
              color: white;  
          }


      </style>

我只想将菜单垂直集中在 header 中，但它始终位于顶部。 obs：使用 margin: x Pixels 可行，但我认为这不是处理该问题的最佳方法。

Answer 1

有多种方法可以解决这个问题。

我会瞄准导航和 header 并给它一个 position: relative;。然后我会给菜单一个 top: 50%; 和 transform: translate(-50%);

这会将菜单向下移动 50% header 并将其拉回其自身高度的 50%。导致菜单居中。

如果你想让菜单中的文本居中，我建议你对 ul 做同样的事情。

您可以查看此内容以供参考 JS fiddle，但请记住，我已经为菜单添加了背景并将 header 放大以便于查看。

导航栏边距：自动，不起作用

NavBar margin: auto, does not work

html

css

margin

navbar