在 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;