如何在Bootstrap中实现复选框在父列内的垂直与水平居中？

嘿，我看你在嵌套列里折腾复选框居中半天了，咱们来一步步搞定它！你之前用的那些Bootstrap类没生效，核心问题是嵌套的row/col没有正确继承高度，还有.form-check的默认样式在搞小动作。

问题分析 #

你给内部的.row加了h-100，但它的父容器（比如最外层的.col-2）默认是高度自适应的，h-100需要父元素有明确高度才能生效，所以导致垂直居中失效。另外，.form-check默认带有margin和特定布局，也会干扰居中效果。

解决方案 #

我调整了你的代码结构，同时优化了样式，确保复选框在嵌套列里完美居中，还兼顾打印效果：

<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">

<style>
/* 覆盖.form-check默认样式，确保复选框容器占满父容器并居中 */
.form-check.center-checkbox {
  margin: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 打印时强制保持布局，避免复选框移位 */
@media print {
  .container-lg, .row, [class^="col-"] {
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
  }
  .form-check.center-checkbox {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}
</style>

<div class="container-lg h-100" style="min-height: 100px; /* 给容器设置最小高度，方便测试效果 */">
  <div class="row h-100">
    <div class="col-2 h-100">
      <div class="row h-100">
        <div class="col-4 border h-100 d-flex align-items-center justify-content-center">
          <div class="form-check center-checkbox">
            <input class="form-check-input" type="checkbox" value="{{obj.total}}" id="flexCheckDefault1" checked>
          </div>
        </div>
        <div class="col-4 border h-100 d-flex align-items-center justify-content-center">
          <div class="form-check center-checkbox">
            <input class="form-check-input" type="checkbox" value="{{obj.total}}" id="flexCheckDefault2" checked>
          </div>
        </div>
        <div class="col-4 border h-100 d-flex align-items-center justify-content-center">
          <div class="form-check center-checkbox">
            <input class="form-check-input" type="checkbox" value="{{obj.total}}" id="flexCheckDefault3" checked>
          </div>
        </div>
      </div>
    </div>
    <div class="col-10 h-100">
      <div class="row h-100">
        <div class="col-2 border h-100 d-flex align-items-center justify-content-center">
          <span>Name</span>
        </div>
        <div class="col-8 border h-100 d-flex align-items-center">
          <span>Desc</span>
        </div>
        <div class="col-1 border h-100 d-flex align-items-center">
          <span>Total</span>
        </div>
        <div class="col-1 wg-right-bottom-border h-100 d-flex align-items-center justify-content-center">
          <div class="form-check center-checkbox">
            <input class="form-check-input" type="checkbox" value="{{obj.total}}" id="flexCheckDefault4">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

关键修改点说明 #

• 高度继承链：给最外层的.container-lg、.row、.col-2、.col-10都加上h-100，确保所有嵌套容器都能继承高度，d-flex align-items-center才能发挥垂直居中的作用。
• 自定义复选框容器样式：新增.center-checkbox类，清除默认margin，让容器占满父容器的宽高，同时用flex布局直接居中内部的复选框。
• 打印适配：添加@media print规则，强制打印时保持flex布局和高度设置，避免浏览器打印时重置样式导致复选框移位。
• 简化嵌套结构：去掉了不必要的多层div嵌套，减少样式冲突的可能性，让布局逻辑更清晰。

你可以把这段代码拿去测试，不管是页面显示还是打印预览，复选框都能稳稳地在列的中心位置啦！

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