引导flexbox垂直对齐

Question

我正在尝试为一个小型网站创建一个模型。

想法：

我想有一个带有英雄图像的标题，我想在容器中垂直放置文本。

该容器在图像中标有绿色边框（.hero），而文本容器则标有红色边框（.hero-content）。根据我的理解，为了使.hero内容在中心对齐，我为它提供了CSS类align-self-center，而.hero本身具有d-flex。由于某种原因，它没有对齐。垂直对齐的概念在下面经过测试，可以很好地工作。

html：

<div class="container-fluid hero d-flex">
    <div class="container ">
    
        <div class="hero-content row align-self-center">
            <div class="col-7">
                <h1>Lorem ipsum dolor, sit amet consect elit.</h1>
                <p class="lead">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                    Delectus assumenda ab distinctio est tempore rep.
                </p>
            </div>

            <div class="col-4">
                image coming soon
            </div>
        </div><!-- hero content -->

    </div>
</div> 

css：

.hero{
    background: rgb(52,160,252);
    background: linear-gradient(180deg, rgba(52,160,252,1) 0%, rgba(50,205,253,1) 100%);
    min-height: 500px;
    border-bottom: 1px solid white;
    
    border: 1px solid green;

}

.hero-content{
    border: 1px solid red; 
}