Flexbox

First, we need to tell it to use flexbox within the header. For that, we use the display property. The display property, by default, is either block or inline, depending of what type of element it is (block in this case). But we want to set it to flex.

header {
  background: gray;
  color: white;
  height: 400px;
  display: flex;
}

This, quite simply, turns on flexbox for the header. Now that actually un-centers things, so to re-center them, we need to say justify-content: center;.

header {
 
  display: flex;
  justify-content: center;
}

There we go. But we're here to align things vertically. And for that, we use the property align-items, and once again give it the value center.

header {
  display: flex;
  justify-content: center;
  align-items: center;
}

In flexbox:
-justify-content aligns things horizontally
-align-items property aligns things vertically.