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??

CodePudding user response：

change

justify-items: center;

(which is an invalid statement)

to

align-items: center;