Javascript 如何将flex中的卡与中间的卡对齐？

我使用了bootstrap中的卡，因为我希望两张卡在同一行中，所以我使用了flex，但现在两张卡在同一行中，但与左上角对齐。我想坐在中间

如果可能的话，有人能告诉我如何在不使用css的情况下保持flex的中心地位吗？并且还可以在卡之间提供一些空间吗

   import React from 'react';
    
    import { Link } from "react-router-dom";
    import Button from '@material-ui/core/Button';
    
    import ButtonGroup from '@material-ui/core/ButtonGroup';
    import { makeStyles } from '@material-ui/core/styles';
    import { Navbar } from 'react-bootstrap';
    import { Nav, NavDropdown, NavItem } from "react-bootstrap";
    
    const useStyles = makeStyles((theme) => ({
      root: {
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        '& > *': {
          margin: theme.spacing(1),
        },
      },
    }));
    
    function SignUp() {
      
      return (
        <div>
          <br/>
          <br/>
        <div style={{display : 'flex'}} >
          <br/>
          <br/>
          <div class="card"  style={{width: '18rem'}}>
      <svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" role="img"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>
    
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Quick sample text to create the card title and make up the body of the card's content.</p>
        <Button>
                <Link class="nav-link" to="/manageexam/:id">
                  Manage Exam
                </Link>
                </Button>
      </div>
      <br/>
      <br/>
      
    </div>
    <div class="card" style={{width: '18rem'}}>
      <svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" role="img"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></svg>
    
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Quick sample text to create the card title and make up the body of the card's content.</p>
        <Button>
                <Link class="nav-link" to="/manageuser/:id">
                  Manage User
                </Link>
                </Button>
      </div>
      
    </div>
      
        
          
                {/*<Button><a href="http://localhost:3000/">LOGOUT</a></Button>*/}
                
        </div>
        </div>
      );
    }
    
    export default SignUp;

从“React”导入React；
从“react router dom”导入{Link}；
从“@material ui/core/Button”导入按钮；
从“@material ui/core/ButtonGroup”导入按钮组；
从'@material ui/core/styles'导入{makeStyles}；
从'react bootstrap'导入{Navbar}；
从“react bootstrap”导入{Nav，NavDropdown，NavItem}；
const useStyles=makeStyles（（主题）=>({
根目录：{
显示：“flex”，
flexDirection:'列'，
对齐项目：“居中”，
'& > *': {
边距：主题。间距（1），
},
},
}));
函数注册（）{
返回(








占位符图像帽
卡片标题
创建卡片标题并构成卡片内容主体的快速示例文本
管理考试




占位符图像帽
卡片标题
创建卡片标题并构成卡片内容主体的快速示例文本
管理用户
{/**/}
);
}
导出默认注册；

您可以使用justify content:“center”（在codejustify content:“center”中）代替alignItems:“center”。并使用div中编写{display:flex}的类

您需要纠正的几点：

您已经编写了useStyles，但从未使用过它

此外，在React中，您必须使用className而不是class

---

请检查您可以在css中添加

justifyContent:center

或

justifyContent:space about

，

请提供您当前的css-这将更容易帮助您。也可以随意设置一个fiddle:）我现在还没有任何css，这些类来自哪里？e、 g.bd占位符img卡img顶部