[解決済み】Bootstrap 3 モーダル縦位置センター

質問

これは2つのパートからなる質問です。

1. モーダルの正確な高さがわからないときに、モーダルを垂直に中央に配置するにはどうしたらよいでしょうか。

2. モーダルを中央に配置し、モーダル-body に overflow:auto を指定して、モーダルが画面の高さを超える場合のみ表示することは可能でしょうか?

これを使ってみました。

.modal-dialog {
  height: 80% !important;
  padding-top:10%;
}

.modal-content {
  height: 100% !important;
  overflow:visible;
}

.modal-body {
  height: 80%;
  overflow: auto;
}

これは、コンテンツが縦方向の画面サイズよりはるかに大きい場合に必要な結果をもたらしますが、小さなモーダルコンテンツの場合はかなり使い物になりません。

解決方法は？

純粋なCSSによる解決策を思いつきました! しかし、ios, android, IE9+, chrome, firefox, desktop safari...でテストして動作することが確認されています。

私は以下のCSSを使用しています。

.modal-dialog {
  position:absolute;
  top:50% !important;
  transform: translate(0, -50%) !important;
  -ms-transform: translate(0, -50%) !important;
  -webkit-transform: translate(0, -50%) !important;
  margin:auto 5%;
  width:90%;
  height:80%;
}
.modal-content {
  min-height:100%;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0; 
}
.modal-body {
  position:absolute;
  top:45px; /** height of header **/
  bottom:45px;  /** height of footer **/
  left:0;
  right:0;
  overflow-y:auto;
}
.modal-footer {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
}

以下はフィドルです。 http://codepen.io/anon/pen/Hiskj

...複数のモーダルの場合、ブラウザに負担をかける余分な重いjavascriptがないため、これを正解として選択しました。