Bootstrap 4：使用align-items-center时实现列等高

我来帮你搞定Bootstrap 4里行内列垂直居中的问题！你提到参考Stack Overflow的回答用了align-items-center类，先看看你的最小可复现示例（MWE），再给你梳理关键修复要点：

你的CSS代码 #

.yellow-row { background-color: #f2c14e; color: #141823; }
.blue-col { background-color: blue; color: white; }

你的HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
</head>
<body>
  <div class="row yellow-row align-items-center">
    <div class="col blue-col">测试列内容</div>
    <div class="col">另一列内容</div>
  </div>
</body>
</html>

关键修复要点 #

align-items-center本身是Bootstrap 4 flex布局中实现垂直居中的正确类，但很多时候没生效，核心原因是行没有足够的高度——flex垂直对齐需要容器有明确高度才能体现效果：

• 给自定义行类.yellow-row添加最小高度或固定高度，比如：

  .yellow-row { 
    background-color: #f2c14e; 
    color: #141823;
    min-height: 200px; /* 可根据需求调整高度 */
  }
  

• Bootstrap 4的.row默认已是flex容器，无需额外添加d-flex类
• 确保列是.row的直接子元素，align-items-center仅作用于行的直接子元素

完整可运行示例 #

.yellow-row { 
  background-color: #f2c14e; 
  color: #141823;
  min-height: 200px;
}
.blue-col { 
  background-color: blue; 
  color: white;
  padding: 1rem; /* 增加内边距让居中效果更直观 */
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
</head>
<body>
  <div class="container mt-4"> <!-- 用容器和间距类优化页面布局 -->
    <div class="row yellow-row align-items-center">
      <div class="col blue-col">这是垂直居中的蓝色列</div>
      <div class="col">这是同一行的另一列，同样会垂直居中显示</div>
    </div>
  </div>
</body>
</html>

调整后，行有了足够高度，align-items-center就能顺利让所有列在垂直方向上居中对齐啦！如果是嵌套布局，注意确保父容器没有干扰flex属性的样式。

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