Css 带引导的按钮垂直对齐

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

基本上，我有一个垂直响应的巨型机器人，所以高度总是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>

这篇文章很好用
这个按钮坏了

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

---

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

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

No change in code

小提琴演示：

---

尝试清除浏览器缓存，然后再次检查。

当我运行上述代码时，我发现了预期的行为。请查看此处的JSFIDLE，让我知道您需要什么actually@Naga2Raja代码现在似乎对我也很有效。早些时候，由于某种原因，当我调整浏览器大小时，按钮不会重新对齐，但现在它确实。。。有趣的