title: How to center in material-ui?
body: <p>I have a login page, with 2 textfields: username and password and login button, with the username field at the topmost, password field below it and the login button at the bottom. I want them to be at the center of the page always both vertically and horizontally. I tried this:</p>
  
  <pre><code>&lt;Grid
      className={classes.container}
      container
      spacing={16}
      direction="column"
      justify="center"
      alignItems="center"
  &gt;
      &lt;Grid item xs={12}&gt;
          &lt;TextField /&gt;
      &lt;/Grid&gt;
      &lt;Grid item xs={12}&gt;
          &lt;TextField /&gt;
      &lt;/Grid&gt;
      &lt;Grid item xs={12}&gt;
          &lt;Button /&gt;
      &lt;/Grid&gt;
  &lt;/Grid&gt;
  </code></pre>
  
  <p>It only centers horizontally. How can I make it center both horizontally and vertically?</p>