表单垂直居中需父容器同时满足三个条件：是Flex容器（d-flex）、有明确高度（如min-vh-100）、且表单为其直接子元素；缺一不可。
表单垂直居中不是给 <form> 加个类就能成的事——核心在于**包裹它的父容器必须是 Flex 容器且有明确高度**，否则 align-items-center 根本没空间可“居”。
父容器必须加 d-flex + align-items-center + 高度类
Bootstrap 的垂直居中逻辑不作用于表单本身，而是由其直接父容器控制。漏掉 d-flex 是最常见失效原因，align-items-center 单独存在毫无意义。
-
d-flex是前提：触发 Flex 布局，让align-items-center有作用域 -
align-items-center是动作：在交叉轴（y 轴）对齐子元素（即<form>） - 高度必须显式：用
min-vh-100（推荐）或h-100；h-100要求所有祖先都有高度，容易断链 - 如果父容器是
<div class="row">，它默认不是 flex 容器，必须额外加d-flex，否则类无效
<form> 里内容也要考虑垂直对齐
表单内部字段（如 <input>、<select>、<button>）默认基线对齐，多控件混排时容易上下错位，尤其和文字或图标并列时。
- 给每个表单控件加
align-middle类（适用于<input>、<select>、<button>等替换元素） - 若控件嵌套在
<div class="input-group">中，align-middle仍需加在控件自身上，而非input-group - 纯文本标签（
<label>）默认是行内元素，和控件对齐时建议也加align-middle或设为d-inline-block - 避免在表单内用
display: grid或display: flex包裹控件——这会让align-middle失效，此时应统一改用d-flex align-items-center控制整行
响应式下高度塌陷的典型表现与应对
移动端地址栏收起/弹出、iOS Safari 视口计算偏差、或固定导航栏遮挡，都会导致 min-vh-100 渲染高度异常，表单“看起来”没居中。
- 用
min-height: calc(100vh - 60px)替代min-vh-100，其中60px是顶部 fixed 导航栏高度（需按实际调整） - 不要依赖
body { height: 100vh }—— 它在部分 iOS 版本中会因地址栏缩放抖动 - 在 DevTools 中检查父容器的
computed height，不是看 class 名；若显示0px或auto，说明高度未生效 - 如果表单被包裹在
<div class="container">内，记得该容器也需继承高度，比如加h-100
真正卡住人的从来不是类名拼写，而是父容器是否真的成了 Flex 容器、是否有可计算的高度、以及表单是否确实是它的直接子元素——这三个条件缺一不可。
