ブートストラップ・コンテナを垂直に中央に置く方法は？

Question

このBootstrapコンテナdivを垂直方向に中央に配置するにはどうすればよいですか？私はそれが私のdivの上と下の黒とページの垂直に中心ページを見るのでそれが欲しいです。

デモ：https://jsfiddle.net/yunr225g/

HTML：

<div class="container"> 
    <div class="row"> 
    <div class="col-md-6 text-center"> 
     <img src="http://placehold.it/250x250"> 
     <button type="submit">Stay</button> 
    </div> 
    <div class="col-md-6 text-center"> 
     <img src="http://placehold.it/250x250"> 
     <button type="submit">Leave</button> 
    </div> 
    </div> 
</div> 

CSS：

body { 
    margin: 10px; 
    background:black; 
} 
button { 
    display:block; 
    text-align:center; 
    margin:0 auto; 
    margin:60px auto; 
    background:black; 
    border:2px solid #ffca00; 
    padding:30px; 
    width:250px; 
    color:#ffca00; 
    text-transform:uppercase; 
} 

Answer 1

まず、あなたは、height:100%にコンテナのすべての親要素を設定する必要がありますか直接height:100vhを使用してください。次に、position + transformのトリックを使用して縦にセンタリングします。

これは大画面でうまくいくので、小さい画面の場合はメディアクエリ+ブレークポイントで調整する必要があります。

html, body { 
    height: 100%; 
} 
body { 
    margin: 0; 
    background: black; 
} 
.container { 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
    border: 1px solid red; 
} 

jsFiddle

それとも、このCSSテーブルのアプローチを試してみてください、それが良い動作しているようだ、とブートストラップグリッドには影響を与えません。注意、ラッパーとして2つの余分なdivを追加しました。

html, body { 
    height: 100%; 
} 
body { 
    margin: 0; 
    background: black; 
} 
.container1 { 
    display: table; 
    width: 100%; 
    height: 100%; 
} 
.container2 { 
    display: table-cell; 
    vertical-align: middle; 
} 

jsFiddle