How do I center one div to the bottom and make another realizable one in the center?

So I'm trying to create a div that displays and image and has a title of the image at the bottom. The image should be have enough room so that it isn't stretched and look weird.Then I want to take that div and reproduce it over and over for as many images as I have.

I drew and image of what I'm trying! to describe I hope you guys and understand it.

This is the code I have so far. I know its not a lot but I'm a little lost.

.box{
        height:250px;
        width:200px;
        margin-top:10px;
        margin-right:15px;
        margin-left:15px;
        margin-bottom:10px;
        float:left;
        background-color:yellow;
}

.photo-div{
        height:50px;
        width:50px;
        background-color:blue;
}

.title-wrap{
        height:40px;
        width: 200px; 
        background:pink;
}

<div class="box">
        <div class="photo-div">
        </div>
    <div class="title-wrap">
    </div>
</div>