Position: fixed and justify-content not working together

Question

Why does justify-content and position fixed not work? What If I want to keep the body fixed, but align it center? How?

https://code.sololearn.com/W6LtSi88u47a/?ref=app

Answer 1

If you want body with position: fixed, you can set
<p>Hello</p> with div.container
<div class="container"><p>Hello</p></div>

Set flexbox from .container

Answer 2

position:fixed makes flexbox not workable, since it overrides the position of <p>Hello</p>
Try to remove it and see the difference.

If you want align-items:center works; try to set
height: 100vh;
since the body height of webview is not set to screen height by default.

Answer 3

Add red color border to body and blue color boder to p .
Run the code.
You will found that everything is working properly.

The problem is that you have taken your whole viewport as body and expecting result accordingly but body is just that red bordered area in your code.

Answer 4

Clueless Coder Learn flexbox from this good tutorial https://youtu.be/fYq5PXgSsbE