html - 无论字体大小如何，绝对居中绝对定位的元素

Question

我想将我的导航项 (li) 垂直居中，恰好一半文本位于白色部分，另一半文本位于灰白色部分。

我试过使用“top: -0.83rem;”但我不确定它是否完全居中，因为我目测了它。

*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: none;
}

.section-border {
  border: 30px solid #ffffff;
  background-color: #f8f7f3;
}

.section-wrap {
  min-height: 600px;
}

.header {
  position: relative;
  margin-left: 1rem;
  margin-right: 1rem;
}

.menu {
  position: absolute;
  top: -0.83rem;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 920px;
  line-height: 1.5em;
}

li {
  display: inline-block;
  font-size: 11px;
}

@media only screen and (min-width: 601px) {
  .home-link {
    flex-grow: 0;
  }
  li {
    text-align: right;
    flex-grow: 1;
    font-size: 16px;
  }
  .menu {
    display: flex;
    flex: 1;
  }
}

<div class="section-border">
  <div class="section-wrap">
    <header class="header">
      <nav role="navigation">
        <ul class="menu">
          <li class="home-link">
            <a href="#"><img src="https://www.nicolefenton.com/_/images/dec/circle-menu.svg" height="12" width="12" alt=""></a>
          </li>
          <li><a href="#">About</a></li>
          <li><a href="#">Writing</a></li>
          <li><a href="#">Speaking</a></li>
          <li><a href="#">Projects</a></li>
        </ul>
      </nav>
    </header>
  </div>
</div>

无论字体大小如何，我都希望所有五个导航项都完全垂直居中。元素的 1/2 应该在白色部分，1/2 应该在灰白色部分。

Answer 1

尝试一下，我已经更改了 .menu 和 li 样式:

*, *:before, *:after { 
        box-sizing: border-box; margin: 0; padding: 0;
        border: none; 
      }

      .section-border {
        border: 30px solid #ffffff;
        background-color: #f8f7f3;
      }

      .section-wrap {
        min-height: 600px;
      }

      .header {
        position: relative;
        margin-left: 1rem;
        margin-right: 1rem; 
      }

      .menu {
        transform: translateY(-50%);
        margin: auto;
        width: 100%;
        max-width: 920px;
        line-height: 1.5em;
      }

      li {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 11px;
      }


      @media only screen and (min-width: 601px) {
        .home-link {
          flex-grow: 0;
        }

        li {
          text-align: right;
          flex-grow: 1;
          font-size: 16px;
        }

        .menu {
          display: flex;
          flex: 1;
        }
      }

<div class="section-border">
    <div class="section-wrap">
      <header class="header">
        <nav role="navigation">
          <ul class="menu">
            <li class="home-link"><a href="#"><img src="https://www.nicolefenton.com/_/images/dec/circle-menu.svg" height="12" width="12" alt=""></a></li>
            <li><a href="#">test<br>test</a></li>
            <li><a href="#">Writing</a></li>
            <li><a href="#">Speaking</a></li>
            <li><a href="#">Projects</a></li>
          </ul>
        </nav>
      </header>
    </div>
  </div>