CSS Grid布局下导航栏文字垂直居中（非定位实现）

我正在练习CSS，尝试将导航栏内的文字垂直居中。我试过使用line-height:100%，但未生效。当前采用CSS Grid布局，导航栏高度设置为1fr，请问有没有不使用定位属性的实现方法？非常感谢。

现有代码 #

CSS代码 #

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 8fr;
  grid-template-areas: "nav nav" "main side";
  grid-gap: .3rem;
  height: 100vh;
}

nav {
  background: black;
  font-family: futura md bt;
  width: 100%;
  position: sticky;
  top: 0;
  grid-area: nav;
  padding: 0 80px;
  box-sizing: border-box;
  margin: 0;
  color: white;
}

.nav-container {
  display: flex;
  height: 100%;
  position: relative;
}

.logo {
  flex-basis: 15%;
  font-size: 1.5rem;
  height: 100%;
  text-align: left;
}

.middle {
  flex-basis: 70%;
  text-align: center;
  height: 100%;
  align-content: center;
}

.apps {
  flex-basis: 15%;
  height: 100%;
  text-align: right;
}

ul {
  padding: 0;
  margin: 0;
  list-style: none;
  height: 100%;
}

.nav-item {
  display: inline-block;
  width: 100px;
  height: 100%;
  margin: 0 25px;
  position: relative;
}

.nav-link {
  color: white;
  font-size: 1.13rem;
  text-decoration: none;
  transition: linear .3s;
  display: inline-block;
}

.trigger {
  height: 100%;
}

.nav-link:hover {
  color: red;
}

.dropdown {
  text-align: center;
  display: block;
  width: 100px;
  position: absolute;
  height: auto;
  background: black;
  display: none;
}

.dropdown-item {
  height: 50px;
  line-height: 50px;
}

.nav-item:hover .dropdown {
  display: block;
}

HTML代码 #

<div class="container">
  <nav>
    <div class="nav-container">
      <div class="logo">
        BFC
      </div>
      <!--logo-->
      <div class="middle">
        <ul>
          <li class="nav-item"><a class="nav-link selected" href="#">Menu</a></li>
          <li class="nav-item"><a class="nav-link " href="#">Services</a></li>
          <li class="nav-item"><a class="nav-link " href="#">Offers</a></li>
          <li class="nav-item"><a class="nav-link " href="#">Bookings</a></li>
          <li class="nav-item"><a class="nav-link trigger" href="#">Contact</a>
            <div class="dropdown">
              <ul class="dropdown-list">
                <li class="dropdown-item"><a href="#" class="dropdown-link">Email</a></li>
                <li class="dropdown-item"><a href="#" class="dropdown-link">Telephone</a></li>
                <li class="dropdown-item"><a href="#" class="dropdown-link">Whatsapp</a></li>
              </ul>
              <!--dropdown-->
            </div>
            <!--dropdown-->
          </li>
        </ul>
      </div>
      <!--middle-->
      <div class="apps">
        Apps
      </div>
      <!--apps-->
    </div>
    <!--nav container -->
  </nav>
</div>
<!--container-->

解决方案（无需定位属性） #

1. 利用Flexbox实现全局垂直居中 #

你的.nav-container已经是flex布局，只需要给导航栏的三个子容器（.logo、.middle、.apps）添加display: flex和align-items: center，就能让内部文字垂直居中：

.logo, .middle, .apps {
  display: flex;
  align-items: center;
}

另外，.middle里的ul也需要同样处理，确保导航项的文字居中：

.middle ul {
  display: flex;
  align-items: center;
}

这种方式完全依赖flex的布局特性，不需要任何定位，适配性强，不管导航栏高度怎么变化都能保持居中。

2. 用CSS Grid快速居中 #

如果喜欢更简洁的代码，可以用Grid的place-items: center属性，一次性实现水平和垂直居中：

.logo, .middle, .apps {
  display: grid;
  place-items: center;
}
.middle ul {
  display: grid;
  place-items: center;
}

效果和Flexbox一致，代码更短，适合快速实现。

3. 正确使用line-height（适合固定高度场景） #

你之前用line-height:100%没效果，是因为百分比是基于文字自身行高计算的，不是父元素的高度。如果导航栏高度固定（比如你的Grid布局里1fr对应约10vh），可以给父容器设置具体的行高，子元素继承即可：

.nav-container {
  line-height: 10vh;
}
.logo, .middle, .apps {
  line-height: inherit;
}

不过这种方式不如Flexbox/Grid灵活，当导航栏高度动态变化时容易失效。

推荐的优化后代码 #

优先选Flexbox方案，修改后的关键CSS如下：

.nav-container {
  display: flex;
  height: 100%;
  /* 移除不需要的position: relative */
}

.logo {
  flex-basis: 15%;
  font-size: 1.5rem;
  height: 100%;
  text-align: left;
  display: flex;
  align-items: center; /* 新增 */
}

.middle {
  flex-basis: 70%;
  text-align: center;
  height: 100%;
  display: flex;
  align-items: center; /* 新增 */
  justify-content: center; /* 让ul水平居中 */
}

.apps {
  flex-basis: 15%;
  height: 100%;
  text-align: right;
  display: flex;
  align-items: center; /* 新增 */
}

.middle ul {
  padding: 0;
  margin: 0;
  list-style: none;
  height: 100%;
  display: flex;
  align-items: center; /* 新增 */
}

内容的提问来源于stack exchange，提问作者Shubomi Fashakin