Bootstrap 4中row的align-items-center类居中不生效如何解决

问题原因 #

align-items-center是Bootstrap 4基于flex布局封装的垂直居中类，你的代码不生效是写法不符合框架规则导致的：

• Bootstrap栅格系统强制要求row的直接子元素必须是带col-*类的列容器，你直接把表单控件、文本放在row下，脱离了栅格布局的计算逻辑，flex对齐规则无法正常作用。
• 复选框错误添加了form-control类，该类会给元素设置width: 100%的块级样式，元素直接撑满整行宽度，没有剩余布局空间，自然无法体现垂直居中效果。
• 登录按钮使用float-right做右对齐，flex容器内浮动属性会失效，还会干扰正常的对齐计算。

修正代码 #

按照Bootstrap表单和栅格的规范调整结构即可：

<!-- 记住密码行 -->
<div class="row align-items-center remember"> 
  <div class="col">
    <div class="form-check">
      <input type="checkbox" class="form-check-input" checked id="rememberMe">
      <label class="form-check-label" for="rememberMe">Remember Me</label>
    </div>
  </div>
</div>
                    
<!-- 登录按钮行 -->
<div class="row align-items-center">
  <div class="col d-flex justify-content-end">
    <input type="submit" value="Login" class="btn login_btn">
  </div>
</div>

补充说明 #

• 如果需要更明显的垂直居中视觉效果，可以给对应row设置明确的min-height值，flex容器在有确定高度时对齐计算更准确。
• flex布局下优先用flex自带的对齐类（比如justify-content-end）做对齐，不要混用浮动，避免出现布局异常。

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