表单垂直居中需父容器同时满足三个条件：是flex容器（d-flex）、有明确高度（如min-vh-100）、且表单为其直接子元素；缺一不可。

表单垂直居中不是给 <form></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></form>）
• 高度必须显式：用 min-vh-100（推荐）或 h-100；h-100 要求所有祖先都有高度，容易断链
• 如果父容器是 <div class="row">，它默认不是 flex 容器，必须额外加 <code>d-flex，否则类无效

  <form></form> 里内容也要考虑垂直对齐

  表单内部字段（如 <input>、<select></select>、<button></button>）默认基线对齐，多控件混排时容易上下错位，尤其和文字或图标并列时。

  

  VPS Bootstrap

  从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

  下载
  • 给每个表单控件加 align-middle 类（适用于 <input>、<select></select>、<button></button> 等替换元素）
  • 若控件嵌套在 <div class="input-group"> 中，<code>align-middle 仍需加在控件自身上，而非 input-group
  • 纯文本标签（<label></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"> 内，记得该容器也需继承高度，比如加 <code>h-100

    真正卡住人的从来不是类名拼写，而是父容器是否真的成了 Flex 容器、是否有可计算的高度、以及表单是否确实是它的直接子元素——这三个条件缺一不可。