为什么在使用 Bootstrap 5 时页眉不在导航和页脚之间垂直居中？

Question

header 包含一个 h1 元素。

我添加到 header: class="d-flex flex-column justify-content-center align-items-center min-vh-100" 但是出现了一个垂直滚动条。我通过在 body 中添加 overflow-hidden class 来删除它，但是 header 不是垂直居中的（它略低于 x 轴中心）。

注意：如果我删除导航，垂直居中会起作用。

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">
  <div class="container-fluid">
    <span class="navbar-brand mb-0 h1">Βάκχος</span>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a href="#" class="nav-link active" aria-current="page">Αρχική</a>
        </li>
        <li class="nav-item dropdown">
          <a href="#" class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">Ανέκδοτα</a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <li><a href="#" class="dropdown-item">Με βιλία</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

<main>
  <header class="d-flex flex-column justify-content-center align-items-center min-vh-100">
    <h1 class="bg-primary">Όταν οι  έφτιαχναν μιμς, οι άλλοι έτρωγαν βελανίδια και κρέμονταν από τα δέντρα!</h1>
  </header>
</main>

<footer>
  <p>Footer</p>
</footer>

Answer 1

一种解决方案是将导航栏绝对定位，并将宽度设置为 100%。
这可以通过在导航中附加一些 Bootstrap 类来完成。

<nav class="navbar navbar-expand-sm bg-primary navbar-dark position-absolute w-100">

这使得页眉相对于屏幕垂直居中。

为什么在使用 Bootstrap 5 时页眉不在导航和页脚之间垂直居中？

Why isn't header vertically centered, between navigation and footer, while using Bootstrap 5?

html

css

twitter-bootstrap

bootstrap-5