如何在Bootstrap中垂直居中div？三列布局场景下的实现咨询

嘿，这个垂直居中的问题我太熟了！之前也踩过类似的坑，给你两个靠谱的解决方案，保证能满足你的需求：左右两列静态布局、文本框响应式垂直居中，中间列可滚动。

方案一：纯Bootstrap工具类实现（无需自定义CSS） #

这个方法最省心，直接用Bootstrap自带的flex工具类就能搞定，核心思路是让左右列变成flex容器，利用flex布局实现垂直居中，同时给中间列设置滚动属性。

完整代码示例 #

<!-- 首先确保页面根容器占满视口高度 -->
<div class="container-fluid h-100">
  <!-- 让行占满容器高度 -->
  <div class="row h-100">
    <!-- 左侧列：用d-flex变成flex容器，align-items-center垂直居中，justify-content-center水平居中 -->
    <div class="col-sm-4 d-flex align-items-center justify-content-center">
      <input type="text" class="form-control w-75" placeholder="左侧文本框">
    </div>

    <!-- 中间可滚动列：h-100占满高度，overflow-y-auto开启垂直滚动 -->
    <div class="col-sm-4 h-100 overflow-y-auto p-3">
      <!-- 这里放测试用的长内容，验证滚动效果 -->
      <p>测试内容</p>
      <p>测试内容</p>
      <p>测试内容</p>
      <p>测试内容</p>
      <p>测试内容</p>
      <p>测试内容</p>
      <p>测试内容</p>
      <p>测试内容</p>
      <p>测试内容</p>
      <p>测试内容</p>
      <p>测试内容</p>
      <p>测试内容</p>
      <p>测试内容</p>
      <p>测试内容</p>
      <p>测试内容</p>
    </div>

    <!-- 右侧列：和左侧列配置一致 -->
    <div class="col-sm-4 d-flex align-items-center justify-content-center">
      <input type="text" class="form-control w-75" placeholder="右侧文本框">
    </div>
  </div>
</div>

关键细节解释 #

• h-100：给容器、行、列设置100%高度，确保垂直居中的参考高度存在（这是你之前可能忽略的点！没有明确高度的话，垂直居中根本无从谈起）。
• d-flex align-items-center：把左右列变成flex容器，内部元素自动垂直居中。
• justify-content-center：让文本框在水平方向也居中（如果不需要可以去掉）。
• overflow-y-auto：中间列内容超过高度时自动显示滚动条，内容不足时不显示，完美适配响应式场景。

方案二：自定义CSS类（适合需要复用样式的场景） #

如果你的项目需要多次用到这类布局，可以封装自定义CSS类，让代码更简洁：

自定义CSS #

/* 让容器占满视口高度 */
.full-height-container {
  height: 100vh;
}

/* 左右列的垂直居中类 */
.vertical-center-col {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* 中间滚动列的类 */
.scrollable-col {
  height: 100%;
  overflow-y: auto;
}

对应HTML结构 #

<div class="container-fluid full-height-container">
  <div class="row h-100">
    <div class="col-sm-4 vertical-center-col">
      <input type="text" class="form-control w-75" placeholder="左侧文本框">
    </div>
    <div class="col-sm-4 scrollable-col p-3">
      <!-- 滚动内容 -->
    </div>
    <div class="col-sm-4 vertical-center-col">
      <input type="text" class="form-control w-75" placeholder="右侧文本框">
    </div>
  </div>
</div>

为什么你之前的方法没生效？ #

大概率是因为没有给父元素设置明确的高度，Bootstrap的vertical-center类（如果是第三方的）或者列偏移，都需要父容器有固定高度才能生效。而flex布局的核心就是依赖父容器的高度来计算居中位置，所以只要确保容器、行、列都有100%高度，再配合flex类，问题就迎刃而解啦！

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