Css 如何在材质界面中居中放置按钮

我不知道如何在材质ui中居中放置按钮。这是我的代码：

function BigCard(props) {
    const { classes } = props;
    return (
    <div>
        <Card className={classes.card}>
        <CardContent>
            <Typography variant="display1" className={classes.title}>
            Start Funding!
            </Typography>
        </CardContent>
        <CardActions >
            <Button size="small" color="primary" className={classes.actions}>
            Share
            </Button>
            <Button size="small" color="primary">
            Learn More
            </Button>
        </CardActions>
      </Card>
    </div>
  );

功能大卡（道具）{
常量{classes}=props；
返回(
开始资助！
分享
了解更多
);

如何使按钮居中？

您可以使用物料界面文档中的

第一条路

您可以执行以下操作：

//Add your justify css in your styles const
const styles = {
    ...
    root: {
        justifyContent: 'center'
    }
};

<CardActions style={{justifyContent: 'center'}}>

并使用类道具将其添加到CardActions组件：

 <CardActions classes={{root: classes.root}}>

第二种方式（更简单）

或者您可以直接在组件上使用样式，但是如果您经常使用MaterialUI，我建议您培训如何使用类

只需做如下操作：

//Add your justify css in your styles const
const styles = {
    ...
    root: {
        justifyContent: 'center'
    }
};

<CardActions style={{justifyContent: 'center'}}>

---

用于避免定义css的用例

<Grid container justify="center">
  {props.children}
</Grid>

{props.children}

下面是我尝试过的内容，它也出现在youtube上的官方视频中

<Grid item xs={12} sm={12} md={4} lg={4}
    style={{
        textAlign:'center' // this does the magic
    }}
>
    <Button>
         NEXT
    </Button>
</Grid>

下一个

---

感谢并致以最良好的祝愿

您可以使用

框

元素

<Box textAlign='center'>
  <Button variant='contained'>
     My button
  </Button>
</Box>

我的纽扣

您必须使用两个属性：显示和对齐内容

<CardActions display='flex' justifyContent='center'>

又快又脏：

<Button style={{margin: '0 auto', display: "flex"}}>
  NEXT
</Button>

下一个

这将使按钮水平居中

 <Button
                size="medium"
                variant="contained"
                color="primary"
                style={{
                    display: "flex",
                    flexDirection: "row",
                    justifyContent:"center",
                    backgroundColor: purple[500],
                    '&:hover': {
                        backgroundColor: purple[700],
                     },
                }}
                
            >
            Get Hired
       </Button>

受聘

以下是我如何使用Material-UI实现的

import {Typography, Button} from '@material-ui/core';

 <Typography align='center'>
    <Button
      color='primary'
      size='large'
      type='submit'
      variant='contained'
     >
      Sign Up
    </Button>
  </Typography>

从'@material ui/core'导入{排版，按钮}；
注册

将代码添加为文本而不是图像。另外，尝试添加一个最小的可验证示例：尝试了上述所有方法，但除此之外，所有方法均无效！