Centering hover text within a flexbox grid

Question

I have a flexbox grid set up with 3 images across and 4 down. 3 of the images have a hover effect on them which contain text and a link. I have just finished a 10 week course on coding but responsive design was not included so I have been testing on a 13" macbook and a 21"iMac to ensure that design and layout look pretty similar across these 2 screen sizes which I reckon will work for all sizes in between too.

However although the text looks perfect on the 13", on the 21" it has a lot of space below the text so I trying to center it.

I have tried setting justify-content, align-content and align-self to center at various places but nothing worked.

I have attached a screen shot of how it looks on the 21" screen to show you what I mean.

here is the html :

<div class="container">
    <div class="box bord crossfd" >
        <img src="images/lou.jpg" alt="Lou" />
    </div>
    <div class="text box" >
        <img src="images/shauna.jpg" alt="portrait of Shauna"  />
        <p>
            <span class="heading">About     Skramshots</span>
            SkramShots.com is the photography website of photgrapher, QA/Software Tester and UI/UX/Web Designer Mark Stewart.                        
            <span class="para2">Click on the link below to see larger views of the images you can see here. </span>                       
            <span class="para2">
                <a href = "images/ciaran.jpg" data-lightbox="clients" data-title="Ciaran">Larger versions</a>
            </span>
        </p>
    </div>
</div>

and here is the css :

.container {
    display: flex;
    flex-wrap: wrap;
}

.container img {
    background-size: contain;
    width: 100%;
}

.text {
    overflow: hidden;
    position: relative;
    transition: all 0.3s;
}

.container p {
    background: rgba(0, 0, 0, 0.3) none repeat scroll 0 0;
    color: white;
    font-family: helvetica, arial, sans-serif;
    font-size: 15px;
    height: 100%;
    left: 0;
    line-height: 1.7em;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 5%;
    position: absolute;
    top: 100%;
    transition: all 1s ease 0s;
    width: 100%;
}

.container p .heading {
    color: #FFD829;
    display: block;
    font-size: 24px;
    padding-bottom: 15px;
}

.para2 {
    margin-top: 15px;
    display: block;
}

.container p a {
    text-decoration: none;
    color: #FFD829;
}

.container p iframe {
    padding-left: 10%;
}

.text:hover p {
    top: 0;
}