Horizontal and vertical centering of content (I don't understand one thing)

I am on my first steps on using Flexbox.

How can I move the image title below the image?

<div class="flexbox-container"><div class="flexbox-child"><img src="http://placehold.it/300x400"><br><h4>This title should go below the image</h4></div><div class="flexbox-child"><img src="http://placehold.it/200x400"><h4>This title should go below the image</h4></div><div class="flexbox-child"><img src="http://placehold.it/300x300"><h4>This title should go below the image</h4></div></div><div class="flexbox-container"><div class="flexbox-child"><img src="http://placehold.it/200x350"></div><div class="flexbox-child"><img src="http://placehold.it/400x200"></div></div>

CSS

.flexbox-container {    height: 50%;    padding: 15px;    display: flex;    align-items: center;    align-content: center;    justify-content: space-around;    .flexbox-child {        height: 100%;        padding: 0 15px;        display: flex;        align-items: center;        img {            max-height: 100%;            margin: 0 auto;        }    }}