I'm unable to center a div vertically through flex box even give height?

Question

I'm trying to center a div through flex box in a react. But it's not working vertically in tutorial they give same styling and its work but on my side not working

This is app.js

<div className="App">
      <h1>Hello world</h1>
</div>

This is App.css

.App{
  display: flex;
  justify-content: center;
  justify-items: center;
  width: 100vw;
  height: 100vh;
 background: rgb(232, 232, 232);
}

Some people say that give height to body I also try it give height:100%; in index.html file using inline CSS but result is same so what's a problem how to center it in both directions vertically as well as horizontally in react through flex box??

can you add images how does it look and how do you want? so we can understand more — mithelan, Jul 30 '22 at 07:00

score 1 · Accepted Answer · answered Jul 30 '22 at 07:08

1

change

justify-items: center;

(which is an invalid statement)

to

align-items: center;

answered Jul 30 '22 at 07:08

DINK74

537
3
5

I'm unable to center a div vertically through flex box even give height?

1 Answers1