title: ReactJS + React Router: How to center div?
body: <p>I currently have a ReactJS + React Router project set up and in Chrome dev tool under elements shows:</p>
  
  <pre><code>&lt;body&gt;
    &lt;div class="wrapper"&gt;
      &lt;div data-reactroot&gt;
        &lt;div&gt;
          &lt;div class="container"&gt;Center Me&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>with styling and none for <code>class="wrapper"</code>:</p>
  
  <pre><code>.container {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  </code></pre>
  
  <p>Yet the <code>&lt;div class="container"&gt;Center Me&lt;/div&gt;</code> is staying at the top and centered horizontally but not vertically. </p>
  
  <p>I checked the size of that div and it is extremely short but takes up full width of the browser page.</p>
  
  <p>What could I be doing wrong? How can I center <code>&lt;div class="container"&gt;Center Me&lt;/div&gt;</code>? I even tried to set <code>100% for width and height</code> on a higher level, but still does not work. </p>