Bootstrap4页面存在Navbar时如何实现元素垂直居中

问题原因 #

你当前的实现中，html和body设置了100%高度，内容容器的h-100类继承了视口的100%高度，但导航栏是独立在内容容器外的块级元素，本身会占据固定高度，导致整体页面高度超过视口高度，内容容器内的垂直居中自然会向下偏移一个导航栏的高度。

方案1：全局flex布局（推荐，适配导航栏高度动态变化场景） #

给body添加纵向flex布局，让内容容器自动占满导航栏之外的剩余高度即可，仅需修改少量CSS：

html, body {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.container {
  flex: 1 0 auto;
}

原有HTML结构无需修改，内容容器的d-flex、align-self-center等配置保留即可，即可实现内容在导航栏之外的剩余视口空间内垂直居中。

方案2：calc动态计算容器高度 #

如果不想修改全局布局，也可以手动计算内容容器的高度，减去导航栏的实际高度即可。Bootstrap 4默认导航栏的高度为56px，修改如下：
首先删除内容容器上的h-100类，添加自定义样式：

.content-container {
  height: calc(100vh - 56px);
}

对应HTML修改为：

<div class="container d-flex content-container">
    <!-- 原有内部代码保持不变 -->
</div>

如果你自定义过导航栏高度，把上面代码中的56px替换为你的导航栏实际高度即可。

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