Css 如何使材质UI FAB按钮居中，并使其在重新调整窗口大小时保持居中？

正如标题所述，我希望MaterialUI FAB按钮居中，并通过调整大小保持居中。当前位置显示在下面的屏幕截图中（偏离中心），并且不会随着窗口更改而重新调整大小

这是当前的FAB按钮组件。它是一个子组件，我也在下面展示了父组件

我无法让“justifyContent:“center”像平时一样正常工作。

欢迎任何关于将其居中并允许其按窗口大小缩放的帮助！谢谢

制作按钮子组件

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Fab from '@material-ui/core/Fab';
import NavigationIcon from '@material-ui/icons/Navigation';
import { navigate } from "@reach/router";

const useStyles = makeStyles((theme) => ({
  root: {
    '& > *': {
        position: 'fixed',
        bottom: "5vh",
        right: "50vw",
        backgroundColor: 'green',
        width: "20vw"
    },
  },
  fab:{
    // fontSize: "35px"
  },
  extendedIcon: {
    marginRight: theme.spacing(1),
    // fontSize: "35px"
  },
}));

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

  return (
    <div className={classes.root}>
      <Fab color="green" aria-label="add" size="large" variant="extended" className={classes.fab} >
        <NavigationIcon onClick={() => {
              navigate("/ChooseACategory")}} className={classes.extendedIcon}/>
              Get Started!
      </Fab>
    </div>
  )
        }

import React from "react";
import ReactNavbar from "../components/Navbar";
import Intro from "../components/Intro";
import GetStartedIcon from "../components/GetStartedIcon"

export default function GetStarted({ setSignedIn }) {
  return (
    <div>
      <ReactNavbar setSignedIn={setSignedIn} />
      <Intro />
      <GetStartedIcon/>
    </div>
  );
}

从“React”导入React；
从'@material ui/core/styles'导入{makeStyles}；
从“@material ui/core/Fab”导入晶圆厂；
从“@material ui/icons/Navigation”导入导航图标；
从“@reach/router”导入{navigate}；
const useStyles=makeStyles（（主题）=>({
根目录：{
'& > *': {
位置：'固定'，
底部：“5vh”，
右：“50vw”，
背景颜色：“绿色”，
宽度：“20vw”
},
},
晶圆厂：{
//字体大小：“35px”
},
扩展图标：{
边缘光：主题。间距（1），
//字体大小：“35px”
},
}));
导出默认函数AddListingIcon（）{
const classes=useStyles（）；
返回(
{
导航（“/ChooseACategory”）}}className={classes.extendedIcon}/>
开始吧！
)
}

包含FAB按钮子组件的父组件

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Fab from '@material-ui/core/Fab';
import NavigationIcon from '@material-ui/icons/Navigation';
import { navigate } from "@reach/router";

const useStyles = makeStyles((theme) => ({
  root: {
    '& > *': {
        position: 'fixed',
        bottom: "5vh",
        right: "50vw",
        backgroundColor: 'green',
        width: "20vw"
    },
  },
  fab:{
    // fontSize: "35px"
  },
  extendedIcon: {
    marginRight: theme.spacing(1),
    // fontSize: "35px"
  },
}));

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

  return (
    <div className={classes.root}>
      <Fab color="green" aria-label="add" size="large" variant="extended" className={classes.fab} >
        <NavigationIcon onClick={() => {
              navigate("/ChooseACategory")}} className={classes.extendedIcon}/>
              Get Started!
      </Fab>
    </div>
  )
        }

import React from "react";
import ReactNavbar from "../components/Navbar";
import Intro from "../components/Intro";
import GetStartedIcon from "../components/GetStartedIcon"

export default function GetStarted({ setSignedIn }) {
  return (
    <div>
      <ReactNavbar setSignedIn={setSignedIn} />
      <Intro />
      <GetStartedIcon/>
    </div>
  );
}

从“React”导入React；
从“./components/Navbar”导入反应导航栏；
从“./components/Intro”导入简介；
从“./组件/GetStartedIcon”导入GetStartedIcon
导出默认函数GetStarted（{setSignedIn}）{
返回(
);
}

---

您的代码可以像您编写的那样工作（显然）。按钮的右侧应居中

您需要将按钮包装在Flexbox中。您可以使用MUI网格进行

宽度为“100%”

，

位置为“固定”

和道具

justify=“center”

下面是一个带有简单css的JSFIDLE