ボタンをブートストラップと縦に整列する

Question

私はウェブ開発全体にはかなり新しいので、これをウェブ上で解決するのに多くの時間を費やしましたが、試してみるとうまくいかないようです。

基本的に、私は垂直に反応するジャンボトロンを持っているので、高さは常に100％です。私はそれが常にジャンボトロンの中心にあるように、垂直方向と水平方向に並べられたテキストのブロックを持っています。

私の問題は、応答性の高いボタンを追加しようとしていて、ジャンボトロンの下部に常に縦に並んでいます。テキストを整列させるために使用したのと同じコードを使用し、ボタンの位置が下になるようにオフセット率を変更すると、ボタンは正しい位置に表示されますが、ブラウザのサイズを変更すると応答しません。リフレッシュ！ここで

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

てみクリアブラウザのキャッシュともう一度再確認してください。