Bootstrap 5 默认 Flex 容器为水平排列（row 方向），若要让子元素垂直堆叠并居中，需添加 flex-column 类并配合 align-items-center 和 justify-content-center。
bootstrap 5 默认 flex 容器为水平排列（row 方向），若要让子元素垂直堆叠并居中，需添加 `flex-column` 类并配合 `align-items-center` 和 `justify-content-center`。
在 Bootstrap 5 中，.d-flex 类默认启用的是 flex-direction: row（即横向排列），因此即使你使用了 align-items-center 和 justify-content-center，所有子 <div> 仍会并排显示——这正是问题中“元素排成一行而非一列”的根本原因。
✅ 正确解法：为父容器添加 flex-column 工具类，显式设置主轴方向为垂直（flex-direction: column）。同时保留 d-flex、align-items-center（控制交叉轴居中）和 justify-content-center（控制主轴居中），即可实现垂直堆叠 + 整体居中的视觉效果。
以下是修复后的完整结构示例（已移除可能导致内容溢出的 body { height: 100vh }，改用语义化高度类）：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 5 垂直居中表单</title>
<!-- Bootstrap 5.3 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Popper & Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"></script>
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/b7fb98327c.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="landing d-flex flex-column align-items-center justify-content-center h-100 p-3" id="start">
<div id="start-app">
<p id="app-name" class="header h1 mb-4">App Name</p>
</div>
<div class="w-100 max-w-md mb-3">
<label for="email" class="form-label">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<div class="w-100 max-w-md mb-3">
<label for="pwd" class="form-label">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd">
</div>
<div class="w-100 max-w-md mb-4">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="remember" name="remember">
<label class="form-check-label" for="remember">Remember me</label>
</div>
</div>
<div>
<button type="button" class="btn btn-primary btn-lg">
<i class="fa-solid fa-circle-play me-2"></i>Start
</button>
</div>
</div>
</body>
</html>? 关键要点说明：
- flex-column 是核心：它将 Flex 主轴设为 column，使子元素自然垂直流式排列；
- align-items-center → 水平居中（对齐交叉轴）；
- justify-content-center → 垂直居中（对齐主轴，此时主轴已是纵向）；
- 移除了冗余 <br>：Flex 布局中应通过间距工具类（如 mb-3, mt-4）控制元素间距离，更语义、更可控；
- 添加 w-100 max-w-md 确保表单控件响应式宽度适配，避免窄屏下溢出；
- 使用标准 <button> 替代无交互语义的 <i>，提升可访问性与用户体验。
? 小贴士：若需在小屏竖排、大屏横排，可结合响应式方向类，例如 flex-column flex-md-row —— Bootstrap 5 支持按断点切换 flex-direction，灵活适配多端布局。
