Can't vertically center headings within div - Tribute page

I am unable to figure out how to vertically center my ‘div within a div’. I would like to have my portraitImage displayed inline with portraitTitle. Portrait title contains H1 and H4. I have them displaying inline how I want, but the problem is I can’t get the spacing on the H1 and H4 nice and tight without throwing my portraitTitle box out of alignment. I don’t understand why the portraitTitle is being bumped down below the header container.

  1. Keep spacing between H1 and H4 tight without bumping the portraitTitle div down. I have tried setting H1 and H4 margin to 0 which tightens up the spacing, but it seems to knock everything out of position.
  2. Is there a way to lock a div so child elements can’t ‘knock it around’?

I have played around with the margins and everything just seems to break. The code I have posted results in the portraitTitle being bumped down below the container of header

<main>
            <header>
                <img class="portraitImage" src="altonbrown-portrait.jpg" alt="Alton Brown's Mug">
                <div class="portraitTitle">
                    <h1>Alton Brown</h1>
                    <h4>Chef. Actor. Entrepreneur, to name a few things.</h4>
                </div>
            </header>
  h1{
    font-size: 2.5em;
    font-family: Merriweather, serif;
    background-color: khaki;
    margin-bottom: 0;
  }
  h4{
    background-color: khaki;
    margin-top: 0;
  }

  main {
    background-color: white;
    width: 75%;
    height: 75%;
    margin:auto;
    border-color: black;
    border-style: solid;
    border-width: 1px;
    border-radius: 5px;
  }
    header{
      background-color: blue;
      height: 125px;
    }


  .portraitTitle{
    display: inline-block;
    background-color: red;
    height: 100%;

  }

Try this:

header {
    text-aling: center;
}

I made up a little jsfiddle showing how it can be done with flexbox here. Likely the easiest way to get vertical centering nowadays.

If you want some more info on flexbox, this article is likely the most used reference on the internet about it:

I tried this and it centers the H1 portion, but I still can’t figure out how to move the H2 portion up without breaking the container.