Text in Flexbox - can not center vertically

General
1

In the image, I have a div that takes up that cell of the grid. It is set to flex and, as you can see, I have already centered it. I can not, however, vertically center it. It must be something easy that I am missing. Any ideas?

Flex-Text

2

Purely Flexbox spoken, you need to think in Parent and Child (element).

So HTML spoken, something like this:

    <div data-pg-name="Parent" class="banner-settings">
        <h1>What a banner</h1>
        <h3>Centering Text by Flexbox</h3>
        <p>This is just a lil approach</p>
    </div>

In words, you have a wrapping DIV as parent and a few lines of semantic stuff (H1, H3 and p) as child items. The parent has a class of banner-settings. The properties of this is as follows:

.banner-settings {
height: 40vh;
background-image: url('../img/reginald-hero-scene.jpg');
background-position: center center;
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;

}

Image spoken - it’ll look like this:

Users_thomaskimmich_Dropbox_Apps_updog_lab_theMagicPlugin_Reginald-TMG-1_00-beta_template_reg-test_html-Pinegrow_Web_Editor-_WP
_Users_thomaskimmich_Dropbox_Apps_updog_lab_theMagicPlugin_Reginald-TMG-1_00-beta_template_reg-test_html_-_Pinegrow_Web_Editor_-_WP.jpg1406×923 150 KB

OK - that’s the theory of Flexbox. But if you mix this with “Grid”, I’m not really aware of the How-to. In theory (and if there is nothing specific in Grid rules to define), the cell is the parent - so it needs to be set to display flex. Or just adding a parent DIV to the p-TAG?

And yes - a height is required doing the magic of vertically center stuff.

Cheers

Thomas