css - Bootstrap 按钮的垂直对齐

Question

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

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

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

这是我的 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

fiddle 演示在这里:Demo Code

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