我对整个网络开发都很陌生，我花了很多时间在网上查找解决方案，但我似乎无法找到一个可以在我尝试时运行的解决方案。
基本上，我有一个垂直排斥的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>
有趣的是，每当我刷新页面时，按钮都会将自己置于正确的位置，但如果我垂直调整浏览器大小，文本会切换到正确的垂直对齐方式，但按钮仍保持固定状态。
有谁知道如何解决此问题/更好的方法来处理垂直对齐？