如何使用 Material-UI 在 React 中垂直和水平居中？

Question

我想将按钮置于屏幕中央的卡片内。到目前为止我还没能做到。

这是我到目前为止所拥有的：

import React from 'react'
import Button from '@material-ui/core/Button'
import { makeStyles } from '@material-ui/core/styles'
import { Card } from '@material-ui/core'
import Grid from '@material-ui/core/Grid'

const useStyles = makeStyles({
  root: {
    background: 'linear-gradient(45deg, #9013FE 15%, #50E3C2 90%)',
    minWidth: '100%',
    minHeight: '100vh',
    display: "flex",
    flexDirection: "column",
    justifyContent: "center"
  },
  card: {
    maxWidth: '40%',
    minHeight: '20vh',
  },
})

export default function LoginPage () {
  const classes = useStyles()

  return (
    <Grid className={classes.root} spacing={0} align="center" justify="center">
      <Card className={classes.card} align="center" justify="center">
        <Button variant="contained" color="primary">
          Hello World
        </Button>
      </Card>
    </Grid>
  )
}

它垂直居中但不水平居中，当我更改其他参数时，它会水平居中但不垂直居中。

结果截图

有任何想法吗？

此致。

Answer 1

用这个

import Stack from "@mui/material/Stack";
import CircularProgress from "@mui/material/CircularProgress";

function Component() {
  return (
    <Stack
      direction="row"
      justifyContent="center"
      alignItems="center"
      sx={{ width: 1, height: "100vh" }}
    >
      <CircularProgress />
    </Stack>
  );
}

Answer 2

您可以使用alignItems。

代码沙盒演示：https://codesandbox.io/s/stack-overflow-material-ui-centering-0rgqx

const useStyles = makeStyles({
  root: {
    background: "linear-gradient(45deg, #9013FE 15%, #50E3C2 90%)",
    minWidth: "100%",
    minHeight: "100vh",
    display: "flex",
    flexDirection: "column",
    justifyContent: "center"
  },
  card: {
    maxWidth: "40%",
    minHeight: "20vh",
    display: "flex",
    alignItems: "center"
  }
});

export default function LoginPage() {
  const classes = useStyles();

  return (
    <Grid
      className={classes.root}
      spacing={0}
      alignItems="center"
      justify="center"
    >
      <Card className={classes.card}>
        <Button variant="contained" color="primary">
          Hello World
        </Button>
      </Card>
    </Grid>
  );
}