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

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>
  )
}

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

Screenshot of the result

有什么想法吗？

最好的问候。

Answer 1

您可以使用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>
  );
}