Css 将资源中心与'；我不在写我的专栏

我有这个布局和css

<div class="container-fluid header">
    <div class="row text-center">
        <div class="col-md-6 red">
            <h1>First</h1>
        </div>
        <div class="col-md-6 red">
            <h1>Second</h1>
        </div>
    </div>
</div>

我在第6列上给出了最小高度，因为我想在那里有额外的空间。我将每列内容的文本居中，文本中心在行上。但我找不到一种方法来垂直居中显示列的内容

例如，我试过

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

弗斯特
第二

但是没有成功

引导实用程序类 您可以通过添加引导实用程序类

d-flex

、

align items center

和

justify content center

来居中显示列的内容

原始CSS 这些实用程序类只是以下方面的内联简写：

某个元素{
显示器：flex；
对齐项目：居中；
证明内容：中心；
}

弹性解释 当

flex

容器具有方向

行

（默认）时，

align items

处理垂直对齐，

justify content

处理水平对齐

当我还在想flex布局时，我发现这篇css技巧文章非常有用

例子

.header{
背景颜色：蓝色；
}
.col-md-6{
高度：300px；
}
瑞德先生{
边框：2倍纯红；
}

弗斯特
第二

您需要对div class=“col”应用“d-flex”

---

默认情况下，行已经是flexbox，但列不是。它没有对齐内容，因为在你给它d-flex类之前它不是flexbox。

谢谢你的回复camaulay。我接受了你的回复。我想知道什么时候.row默认显示为：flex，当我们使用align items center或align content center时-为什么列中的内容不垂直居中？列本身将垂直居中，而不是列中的内容。这有意义吗？是的，非常感谢

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