引导程序4:将内容垂直居中于自定义div中的容器中

我试着阅读其他答案,但就我所能找到的,我的具体案例没有答案。

我想在引导容器中创建一个半透明的背景,以提高文本可读性。我能做到的是:

这看起来不太好:我希望文本和按钮在 我的背景 部门。

根据我在这里发现的其他问题,我尝试添加这些类 align-items-center justify-content

我该怎么解决这个问题?

<div class="my-background">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-12">
                <div id="content align-items-center justify-content">
                    <h1>Hello World</h1>
                    <h3>Welcome to my fancy Hello World page!</h3>
                    <hr>
                    <button class="btn btn-default btn-lg">Button</button>
                </div>
            </div>
        </div>
    </div>
</div>

CSS格式:

html {
    height: 100%;
}
.my-background {
    text-align: center;
    height: 100%;
    margin-top: 100px;
    background-color: rgba(0, 0, 0, 0.4);
}

#content {
    margin: auto;
    text-align: center;
    padding-top: 25%;
}