Bootstrap 4垂直居中功能失效问题求助

我之前也踩过这个垂直居中的坑！你用了align-items-center和h-100但没生效，核心原因是所有父级元素（包括html、body和Angular的根组件app-root）都需要设置100%高度——Bootstrap的h-100是相对父元素高度的，如果最上层的父元素高度不是视口高度，你的row就算加了h-100也没法占满整个页面，自然没法垂直居中。

下面是具体的解决步骤：

1. 全局设置父元素高度 #

打开你的全局样式文件（比如src/styles.css），添加以下样式：

html, body, app-root {
  height: 100%;
  margin: 0; /* 去掉默认边距，避免出现滚动条 */
}

2. 调整你的容器代码 #

确保container和row都正确添加了h-100，同时保留justify-content-center和align-items-center。另外mx-auto可以去掉，因为justify-content-center已经能让列水平居中了：

<div class='container h-100'>
  <div class='row h-100 justify-content-center align-items-center'>
    <div class='col-sm-6' style="border: 2px solid red">
      <h3 class="text-center">Título da Aplicação</h3>
      <!-- 这里放你的其他面板内容 -->
    </div>
  </div>
</div>

额外检查点 #

如果还是没生效，可以排查这两个问题：

• 有没有其他固定高度的元素（比如顶部导航栏）占用了页面高度，导致可用垂直空间不足？
• 有没有自定义样式覆盖了Bootstrap的h-100类？可以用浏览器开发者工具检查元素的高度计算。

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