Html 引导4：将内容垂直居中于自定义div内的容器内

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

我想在引导容器中制作一个半透明的背景，以提高文本可读性。我能做到的是：

这看起来不太好：我希望文本和按钮在my background div中垂直和水平对齐

根据我在这里发现的其他问题，我尝试将类

align items center justify content

添加到我的内部div中，但结果并没有太好：

正如我们所看到的，“按钮”按钮仍然接触到背景的底部，并且内容本身在背景中仍然没有垂直对齐

我该如何解决这个问题

这是我的密码：

<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>

---

对于这种情况，我建议使用flex

可以找到完整的指南

然而，为了让所有的东西都对准中心，你可以做类似的事情，实际上就是使用flex

html{
身高：100%；
}
1.我的背景{
显示器：flex；
对齐项目：居中；
证明内容：中心；
文本对齐：居中；
高度：700px；
边缘顶部：100px；
背景色：rgba（0,0,0,0.4）；
}
人力资源{
宽度：100%；
}
#内容{
保证金：自动；
文本对齐：居中；
垫面：25%；
}

你好，世界
欢迎来到我的“你好世界”页面！

按钮

要做到这一点，您需要为父元素添加一个固定的高度。@ramesh即使在该链接中给出了答案，但这无助于解决我的具体问题，即滥用边距和填充。有了7otk的回答，我就知道我为什么错了。对其他人来说，即使我的问题符合规则，写得很好，显示了我试图做的事情，并且有代码示例，但让我的问题被否决是非常令人沮丧的，更令人沮丧的是，如果被否决的人不告诉我他们为什么这样做，那么我可以在将来改进。Flex不是一个浏览器兼容的属性Hi，几乎所有主流浏览器都支持flex。参见flex上的@Ramesh boostrap-4继电器，以构建布局；）这项工作进行了一些调整。在内容中，我只保留了文本对齐：居中，并删除了所有的填充和边距（这很重要），在我的背景中，我还添加了一个10px的底部填充。下面是一个JSFIDLE，它演示了我的解决方案：

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%;
}