ReactJS + React Router: How to center div?

November 30, 2023 by Tarik

Just:

<div style={{display: 'flex',  justifyContent:'center', alignItems:'center', height: '100vh'}}>
    <h1> I am centered </h1>
</div>

or css:

.centered {
  height: 100vh; /* Magic here */
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="centered">
  <h1> I am centered </h1>
</div>