How do I vertically center a div element onto another div element?

I am doing the Tea Cozy project for CSS ‘Getting More Advanced with Design’. I am stuck on the part where I have to vertically center a div element onto a background image, that I put into another div.


My current HTML code is here:

<section id="mission">
        <div id="banner-background">
            <img src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-mission-background.jpg" alt="The background to the page, pictures a jar full of spices.">
            <div id="banner">
                <h2>Our Mission</h2>
                <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
            </div>
        </div>
    </section>

and my CSS code is here:


#banner-background {
    width: 1200px;
    height: 700px;
}

#banner-background img {
    width: 1200px;
    height: 700px;
}

#banner {
    width: 1200px;
    background-color: black;
}

This is what the code renders on the website:


I prefer to stick to Flexbox when creating the CSS, but if this is not needed or there is a better way, then please tell me so.
Thank you!

Check the documentation, https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container

It’s super useful to have bookmarked

1 Like

Also check out Kevin Powell’s css youtube channel. It is incredibly helpful on every little css thing one always struggle with.

1 Like

Thanks for the tip. I appreciate this very much.

1 Like