Выровнять по вертикали в Grid of material-ui не работает

Question

У меня есть этот фрагмент кода, и он должен центрировать кнопку по вертикали и горизонтали, но кнопка не отцентрирована по вертикали, и я не знаю почему?

Кто-нибудь может мне с этим помочь?

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

Попробуйте этот код.

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;

Изменить Изменить текст переключателя