Center flex element vertically while other flex element is at the top

So I have two flex elements within this image showcase… A navbar and a header. The navbar I want to remain where it is at the top. However, I want the header to be in the center of the image showcase. I have tried align-self and justify-self but neither seemed to do what I want.
Here is the code: https://codepen.io/danny98m/pen/OreqyM

Thanks!

This would do the trick:

#main-header {
  margin: auto 0;
}

Personally, I would simply separate navbar and header as two different flex containers.

1 Like

how did you figure out that was the issue?

Personal experience working with flex items.
It’s a common pattern when designing navbars, if you want to have for example 3 buttons in the left side, then another one on the right side, you use margin-left on the last button.

Using margin-auto makes the element take the whole remaining space, therefore setting it for the up and bottom margins would have them both trying to grab all the space, resulting in a 50% split.

1 Like