Vertical and horizontal centering using flex (multiple elements)

Question

In my current scenario I have 6 equally spaced blocks 3 by 3 using Bootstrap and col-*-4. These blocks are just slightly styled thumb-nails (still using Bootstrap 3).

In these boxes I have text at the bottom, which I have positioned with:

position: absolute; bottom:0;

As well as this I have an image above which I have positioned within a DIV using:

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

The end result is this

My question is, instead of using a fixed height when using flex, is there a way to center the image within the entire area of the thumbnail, with the text remaining at the bottom.

Could I make the entire thumbnail display:flex?

Added code below

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;
}

Add your code, if it is possible, add it into a snippet or fiddle. Take a look at [this post](https://css-tricks.com/snippets/css/a-guide-to-flexbox/).Thanks — Facundo La Rocca, Jan 13 '17 at 12:18
possible duplicate: http://stackoverflow.com/q/36191516/3597276 — Michael Benjamin, Jan 13 '17 at 12:28
I don't completely understand your questions. What's the actual problem? — Serg Chernata, Jan 13 '17 at 13:52
Sorry, essentially by doing it in this way, at different viewports I have to adjust the height of img-center and it isn't the most maintainable. — Jesse Luke Orange, Jan 13 '17 at 16:05

score 0 · Answer 1 · answered Jan 13 '17 at 12:51

Maybe use this structure..

<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>

score 0 · Answer 2 · answered Jan 13 '17 at 14:45

Is there a specific need for the img-center container? Why not just remove img-center and set thumbnail to display flex?

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;
}

Vertical and horizontal centering using flex (multiple elements)

2 Answers2