Vertical and horizontal centering with flexbox.

flex-centering.html

<div class="xx">
    <img src="http://placehold.it/1250x600" alt="#" />

    <div class="yy">
        <div class="zz">
            Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur 
            vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare 
            ante, ac egestas est urna sit amet arcu.
        </div>
    </div>
</div>

<style>
.xx {
    position:relative;
    background:#F00;
    text-align:center;
}

.xx img {
    max-width:100%;
}

.yy {
    position:absolute;
    top:0;
    left:0;

    display:flex;
    align-items:center;
    justify-content:center;

    width:100%;
    height:100%;
    background:rgba(0, 255, 0, 0.5);
}

.zz {
    width:90%;
    background:rgba(0, 0, 255, 0.5);
}
</style>