Bootstrap栅格列设置内容垂直居中不生效该如何解决？

之前的尝试出现了对齐对象的错位：

• 你给每个col-md-6设置了min-height: 300px，意味着列元素本身已经占满了300px的纵向空间
• 此时给列加align-self-center，作用是控制列作为row的子项，在row容器内的纵向对齐位置——但列本身已经撑满了对应高度，没有可偏移的空间，自然看不到任何效果
• 真正需要垂直居中的是列内部的h1标题内容，不是列元素本身。

方案1：仅用Bootstrap内置类实现（无需改动原有CSS） #

直接把每个列自身调整为弹性布局容器，利用内置的对齐类控制内部内容的位置，修改后的结构如下：

<div class="container-fluid header">
    <div class="row text-center d-flex">
        <div class="col-md-6 red d-flex align-items-center justify-content-center">
            <h1 class="mb-0">First</h1>
        </div>
        <div class="col-md-6 red d-flex align-items-center justify-content-center">
            <h1 class="mb-0">Second</h1>
        </div>
    </div>
</div>

各工具类的作用：

• d-flex：把列设置为弹性布局容器
• align-items-center：让容器内的h1在垂直方向居中，实现核心的垂直居中效果
• justify-content-center：在flex布局下更稳定地实现内容水平居中，比原有的text-center兼容性更好
• mb-0：移除h1默认的底部外边距，避免微小偏移影响居中精度

你之前写的所有CSS（.header的蓝色背景、.col-md-6的300px最小高度、.red的红色边框）都可以完全保留，不需要做任何修改。

方案2：极简CSS实现 #

如果不想叠加太多Bootstrap工具类，只需要在原有.red类的样式里补充两行弹性布局设置，就能达到同样的效果：

.header {
    background-color: blue;
}

.col-md-6 {
    min-height: 300px;
}

.red {
    border: 2px solid red;
    /* 新增以下两行 */
    display: flex;
    align-items: center;
}

这种实现下，列本身因为有300px的固定高度，变成弹性容器后，内部的h1会自动垂直居中，配合原有row上的text-center类，就能同时实现水平+垂直居中的效果。

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