ブートストラップ液体容器垂直中心

Question

流体容器（ブートストラップ）内でDIVを中心に置くのに苦労しています。この問題を解決するのに役立つかもしれません。

私は以下の結果を得たいと思います。 Image vertically centered block

私はフルサイズの要素を取得するために "流体" Bootstrapクラスを使用するまで、いくつかのトピックを通して回答を探して、それを有効にしました。

EDIT：私はフレキシボックスを使用しようとしましたが、ブロックは、ページの上部にstuckedです：enter image description here

html, 
body { 
    min-height: 100%; 
} 
.container-block { 
display: flex; 
align-items: center; 
justify-content: center; 
color: #FFF; 
} 

.block { 
height: 100px; 
width: 100%; 
background: #313131; 
} 

HTML：あなたは

<div class="fluid-container"> 
    <div class="fluid-container container-block"> 
    <div class="col-lg-12 text-center block">AAA</div> 

</div> 

を持っていますか私が間違っていることのアイデア？

ありがとうございました！

Answer 1

100％の高さは、テーブルのセルの表示変更が

をブロックするために、あなたのCSSにmin-height : {somemeasure}pxを追加するためにそれのために

試してenougないか、あなたはあなたのブロックのためのフレキシボックスのアプローチを使用するように試みることができる：

.someselector { 
    display   : flex; 
    justify-content : center; 
    align-items  : center; 
} 

Answer 2

これは実際にはブートストラップの問題ではなく、純粋なCSSとアブソルートの配置で達成できます。

html, 
body { 
height: 100%; 
margin: 0; 
} 
.full-page { 
height: 100%; 
width: 100%; 
background: #f1f1f1; 
posistion: relative; 

} 
.central-block { 
height: 100px; 
width: 100%; 
background: #323836; 
color: #FFF; 
margin-top: auto; 
margin-bottom: auto; 
position: absolute; 
top: 0; 
bottom: 0; 
right: 0; 
left: 0; 

} 

JS Fiddle

Answer 3

Lim Kayasの提案に従って、Flexboxを使用して終了しました。 ありがとう！