How to display one item on top of other items by using Flexbox?

By using Flexbox, I want to center three elements inside a photo and then put one element on top of those three:

I tried this to center them and obviously all the items get centered, whereas I only want the three boxes to be centered:

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

These are the HTML and CSS codes for that particular section:

HTML:

        <section class="banner-3">
            <article>
                <h2 id="locations">Locations</h2>
                <div class="address">
                    <h3>Downtown</h3>
                    <p>384 West 4th St</p>
                    <p>Suite 108</p>
                    <p>Portland, Maine</p>
                </div>
                <div class="address">
                    <h3>East Bayside</h3>
                    <p>3433 Phisherman's Avenue</p>
                    <p>(Northwest Corner)</p>
                    <p>Portland, Maine</p>
                </div>
                <div class="address">
                    <h3>Oakdale</h3>
                    <p>515 Crescent Avenue</p>
                    <p>Second Floor</p>
                    <p>Portland, Maine</p>
                </div>
            </article>
        </section>

CSS:

.banner-3 article {
    height: 500px;
    width: 1200px;
    background-image: url("../images/img-locations-background.jpg");
    background-repeat: no-repeat;
    background-position-y: center;
    background-size: cover;
    margin: 0 auto;
    margin-top: 2.5%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.banner-3 .address {
    width: 300px;
    height: 300px;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    background-color: black;
    opacity: 1;
    margin: 20px;
}

.address h3, p {
    margin: 25px auto;
}

Any help would be appreciated.