title: Vertically center text inside grid element
body: <p>I need to vertically center text inside grid item, which has minHeigh attribute set, <a href="https://codesandbox.io/s/k3q58jy8y7" rel="nofollow noreferrer">here's short codesandbox example of the problem i'm facing</a>, justify, alignItems, does not seem to be working.</p>
  
  <pre><code>  &lt;Grid container className={classes.root}&gt;
      &lt;Grid item xs={12}&gt;
        &lt;Grid
          container
          spacing={16}
          className={classes.demo}
          alignItems={alignItems}
          direction={direction}
          justify={justify}
        &gt;
          {[0, 1, 2].map(value =&gt; (
            &lt;Grid
              key={value}
              item
              style={{
                padding: "0 12px",
                minHeight: 48,
                borderStyle: "solid"
              }}
            &gt;
              {`Cell ${value + 2}`}
            &lt;/Grid&gt;
          ))}
        &lt;/Grid&gt;
      &lt;/Grid&gt;
  </code></pre>
  
  <p>When <code>style={{ minHeight: 48 }}</code> is applied to <code>&lt;Grid item /&gt;</code> children of grid item is not being aligned, justify, alignItems, does not have any effect on it.</p>