フレックス（複数の要素）を使った垂直方向と水平方向のセンタリング

Question

私の現在のシナリオでは、ブートストラップとcol - * - 4を使って3つの等間隔ブロックが3つずつあります。これらのブロックはちょうどわずかにスタイリングされたサムネイルです（まだブートストラップ3を使用しています）。

私がして配置している底部、でテキストを有するこれらのボックスに

：

：

position: absolute; bottom:0;

と同様に、この私が使用してDIV内に配置されている上に画像を有しています

height: 400px; 
display: flex; 
justify-content: center; 
align-items: center; 

最終的な結果は、この

012であります

私の質問は、フレックスを使用する際に固定の高さを使用する代わりに、サムネイルの全領域に画像を中央に配置し、テキストを最後に残す方法です。

サムネイル全体をdisplay:flexにできますか？

HTML

<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4"> 
<div class="thumbnail grey mb-30"> 
    <div class="img-center"> 
     <img src="img/picto/originals/png/Heart/Newable_Pictogram_CoolGrey_HEART.png" class="img-responsive picto_padding" alt="..."> 
    </div> 

    <div class="caption"> 
     <h3>Responsibe finance</h3> 
     <p>We’re the responsible alternative for those who find High Street bank finance difficult to obtain. </p> 
    </div> 
</div> 
</div> 

CSS

.img-center { 
height: 350px; 
display: flex; 
justify-content: center; 
align-items: center; 
} 

.grey { 
    background: #f0f0f0; 
} 
.thumbnail { 
    border: none; 
} 
.mb-30 { 
    margin-bottom: 30px; 
} 
.thumbnail { 
    border: none; 
    min-height: 450px; 
    position: relative; 
} 

.caption{ 
    position:absolute; 
    bottom:0; 
} 

Answer 1

たぶん、この構造体を使用し、以下の追加コード..

<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 grey mb-30"> 
<div class="thumbnail"> 
    <div class="img-center"> 
     <img src="img/picto/originals/png/Heart/Newable_Pictogram_CoolGrey_HEART.png" class="img-responsive picto_padding" alt="..."> 
    </div> 
</div> 
<div class="caption"> 
     <h3>Responsibe finance</h3> 
     <p>We’re the responsible alternative for those who find High  Street bank finance difficult to obtain. </p> 
</div> 
</div> 

Answer 2

img-centerコンテナが特に必要ですか？ flexを表示するためにimg-centerを削除してサムネイルを設定するだけではどうですか？

https://jsfiddle.net/bashaen/wbrzfds7/

<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4"> 
<div class="thumbnail grey mb-30"> 
<img src="img/picto/originals/png/Heart/Newable_Pictogram_CoolGrey_HEART.png" class="img-responsive picto_padding" alt="..."> 

    <div class="caption"> 
     <h3>Responsibe finance</h3> 
     <p>We’re the responsible alternative for those who find High Street bank finance difficult to obtain. </p> 
    </div> 
</div> 

.grey { 
    background: #f0f0f0; 
} 
.thumbnail { 
    border: none; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
} 
.mb-30 { 
    margin-bottom: 30px; 
} 
.thumbnail { 
    border: none; 
    min-height: 450px; 
    position: relative; 
} 

.caption{ 
    position:absolute; 
    bottom:0; 
}