title: How to horizontally center an item in MUI Grid item?
body: <p>How do I center elements inside a MUI <code>Grid</code> item? Here is a snippet from my React application:</p>
  <pre><code>&lt;Grid container&gt;
    &lt;Grid item xs={4}&gt;
      // Unrelated stuff here
    &lt;/Grid&gt;
    &lt;Grid item xs={4}&gt;
      // How do I centre these items?
      &lt;IconButton className={classes.menuButton} color=&quot;inherit&quot;&gt;
        &lt;EditIcon/&gt;
      &lt;/IconButton&gt;
      &lt;IconButton className={classes.menuButton} color=&quot;inherit&quot;&gt;
        &lt;CheckBoxIcon/&gt;
      &lt;/IconButton&gt;
    &lt;/Grid&gt;
    &lt;Grid item xs={4}&gt;
      // Unrelated stuff here
    &lt;/Grid&gt;
  &lt;/Grid&gt;
  </code></pre>
  <p>I've tried applying <code>alignContent</code>, <code>justify</code>, <code>alignItems</code> (to the parent <code>&lt;Grid item&gt;</code>) with no success.</p>
  <p>I thought this would be quite simple, but I've failed to find any information on centering items inside of grid items.</p>