使用Bootstrap无法垂直对齐元素？寻求技术解决方案

要实现垂直居中，你需要确认以下核心条件——justify-content-center 和 align-items-center 是Flex布局的专属属性，必须满足布局前提才会生效：

• 父容器必须声明 display: flex，否则这两个对齐类完全不起作用。
• 父容器需要有足够的高度支撑垂直对齐效果，比如设置 min-height: 100vh（让容器占满整个浏览器视口高度），如果父容器高度仅等于内容高度，垂直居中的视觉效果无法体现。
• 若希望h1和h2垂直排列，需给父容器添加 flex-direction: column，Flex布局默认是水平排列子元素的。

示例代码调整 #

假设你的HTML结构如下：

<div class="hero justify-content-center align-items-center text-center">
  <h1>帆板爱好者之家</h1>
  <h2>探索海浪的无限可能</h2>
</div>

对应的CSS需要补充以下规则：

/* 启用Flex布局并设置容器高度 */
.hero {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* 清除body默认margin，避免顶部留白干扰 */
body {
  margin: 0;
}

额外检查点 #

• 确认父容器没有被上级元素限制高度（比如固定高度、overflow属性）。
• 检查h1/h2是否设置了position: absolute等脱离文档流的属性，这类属性会破坏Flex布局的对齐逻辑。

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