使用 Bootstrap 垂直对齐按钮

Question

作为一个整体，我对 Web 开发还很陌生，我已经花了很多时间在 Web 上寻找解决方案，但我在尝试时似乎找不到一个有效的解决方案。

基本上，我有一个垂直响应的 jumbotron，因此高度始终为 100%。我有一块垂直和水平对齐的文本，因此它始终位于 jumbotron 的中心。

我的问题是尝试添加一个响应式按钮，并且始终垂直对齐在 jumbotron 的底部。如果我使用与对齐文本相同的代码，并更改偏移百分比以使按钮位于底部，则按钮会显示在正确的位置，但当我调整浏览器大小时不会响应，除非我刷新！

这是我的 css 部分代码：

html, body{
       height: 100%
}

.jumbotron{
        height: 100%
}

.middle{
        position: relative;
        top:50%
        transform: translateY(-50%);
}

html 部分如下：

<div class="jumbotron text-center">
        <h1 class = "middle"> This text works fine </h1>
        <button type = "button" class = "btn btn-primary middle"> This button doesn't work
        </button>
</div>

有趣的是，每当我刷新页面时，按钮都会将自身置于正确的位置，但如果我垂直调整浏览器的大小，文本会移动到正确的垂直对齐方式，但按钮保持固定。

有谁知道如何解决这个问题/更好的方法来处理垂直对齐？

Answer 1

给定的代码似乎具有预期的行为。

No change in code

这里的小提琴演示：Demo Code

尝试清除浏览器缓存并重新检查。