Reactjs 如何在与物料界面的反应中垂直和水平居中？

我想把一个按钮放在屏幕中央的一张卡片的中央。到目前为止我还没能做到

这就是我到目前为止所做的：

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

从“React”导入React
从“@material ui/core/Button”导入按钮
从“@material ui/core/styles”导入{makeStyles}
从“@material ui/core”导入{Card}
从“@material ui/core/Grid”导入网格
const useStyles=makeStyles({
根目录：{
背景：“线性梯度（45度，#9013FE 15%，#50E3C2 90%”，
最小宽度：“100%”，
最小高度：“100vh”，
显示：“flex”，
flexDirection:“列”，
为内容辩护：“中心”
},
卡片：{
maxWidth:'40%'，
最小高度：“20vh”，
},
})
导出默认函数登录页（）{
常量类=useStyles（）
返回(
你好，世界
)
}

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

有什么想法吗

---

致以最诚挚的问候。

您可以使用

alignItems

代码沙盒演示：

const useStyles=makeStyles({
根目录：{
背景：“线性梯度（45度，#9013FE 15%，#50E3C2 90%）”，
最小宽度：“100%”，
最小高度：“100vh”，
显示：“flex”，
flexDirection:“列”，
为内容辩护：“中心”
},
卡片：{
最大宽度：“40%”，
最小高度：“20vh”，
显示：“flex”，
对齐项目：“中心”
}
});
导出默认函数LoginPage（）{
const classes=useStyles（）；
返回(
你好，世界
);
}

您可以使用

alignItems

代码沙盒演示：

const useStyles=makeStyles({
根目录：{
背景：“线性梯度（45度，#9013FE 15%，#50E3C2 90%）”，
最小宽度：“100%”，
最小高度：“100vh”，
显示：“flex”，
flexDirection:“列”，
为内容辩护：“中心”
},
卡片：{
最大宽度：“40%”，
最小高度：“20vh”，
显示：“flex”，
对齐项目：“中心”
}
});
导出默认函数LoginPage（）{
const classes=useStyles（）；
返回(
你好，世界
);
}

尝试了此操作，但ti没有将按钮置于卡盒的中央。它在链接的沙盒中居中。如果你增加卡片的大小，你会注意到它们只是共享相同的大小，但按钮没有居中。在这里你可以检查：尝试了这个，但ti没有中心的按钮在卡片上。它在链接的沙盒中居中。如果你增加卡片的大小，你会注意到它们只是共享相同的大小，但按钮没有居中。您可以在这里查看：

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