Align vertically in Grid of material-ui not works

Question

I have this piece of code and it should center the button vertically and horizontally, but the button is not centered vertically, and I don't know why?

Can anyone help me with that?

import React from 'react';
import Button from '@material-ui/core/Button';
import Grid from '@material-ui/core/Grid';

function App() {
  return (
        <Grid container direction="row" justify="center" alignItems="center" justifyContent="center">
          <Grid item>
            <Button variant="contained" color="primary">Hello</Button>
          </Grid>
        </Grid>
  );    
} 

export default App;

Answer 1

Try this code.

import React from "react";
import Button from "@material-ui/core/Button";
import Grid from "@material-ui/core/Grid";

function App() {
  return (
    <Grid
      container
      spacing={0}
      direction="column"
      alignItems="center"
      justify="center"
      style={{ minHeight: "100vh" }}
    >
      <Grid item>
        <Button variant="contained" color="primary">
          Hello
        </Button>
      </Grid>
    </Grid>
  );
}

export default App;