Css 引导4垂直对齐不工作

我正在为一个电子应用程序制作一个非常简单的表单，我正在做这个软件的实验，但是，我被最基本的东西卡住了。。。界面设计

我正在使用Bootstrap4作为我的界面，并试图将表单垂直居中，然而，我使用对其他人关于同一主题的问题提出的各种建议得到了混合结果。它们要么不起作用，要么把我的所有内容压缩到一行，通常会把当前的布局搞得一团糟

关于如何垂直对齐下面容器中的项目，有什么建议吗

<!-- Search Field -->
<div class="container">
    <div class="row justify-content-center">
        <div class="col-sm-auto">
            <h1 class="text-white">Shorten M' URL!</h1>
        </div>
    </div>
    <div class="row justify-content-center">
        <div class="col-sm-6">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Enter URL...">
                <span class="input-group-btn">
            <button class="btn btn-primary" type="button">Shorten!</button>
        </span>
            </div>
        </div>
    </div>
</div>

缩短M'URL！
缩短！

你在找这个吗

.vh-100{
高度：100vh；
}

缩短M'URL！


缩短！

您将垂直对齐什么？@dferenc我已更新代码以删除失败的尝试。我想对齐容器中的所有内容。这似乎没有达到预期效果：它不是垂直对齐吗？不是吗？我希望它在窗口中垂直对齐，以便顶部和底部的填充是相同的。根据您的澄清更新了我的答案。我稍微编辑了您的答案，但效果非常好！谢谢