Img Perfectly centred with FlexBox

Hello everyone, I’m practicing FlexBox by creating code to perfectly center an image. According to what it is required in the exercise I have to place a H1 on top of the perfectly centered image using position: absolute; to break the document’s flow (body is the flex container), but what is happening is that the H1 is been positioned over the img, right in the centre.

Please help!!
codepen: https://codepen.io/Hensahi/pen/qBOpMXv

I’m new to all this, I’ll appreciate all the help you can hand me.

Hey,

Checkout the top CSS attribute https://developer.mozilla.org/en-US/docs/Web/CSS/position

Hope that helps!