我如何使“版式”组件居中？

Question

我曾尝试使用flexbox justify-content将其居中，但没有用然后，我尝试用Typography标记替换div组件，但仍然无法正常工作

import {AppBar,Zoom,Toolbar,Typography,CssBaseline,useScrollTrigger,Fab,makeStyles,IconButton,Container } from '@material-ui/core'
import PropTypes from 'prop-types';
import KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp';
import styles from './menu.module.css'
import MenuIcon from '@material-ui/icons/Menu'


const useStyles = makeStyles(theme => ({
  root: {
    position: "fixed",
    bottom: theme.spacing(2),
    right: theme.spacing(2)
  }
}));

function ScrollTop(props) {
  const { children, window } = props;
  const classes = useStyles();
  // Note that you normally won't need to set the window ref as useScrollTrigger
  // will default to window.
  // This is only being set here because the demo is in an iframe.
  const trigger = useScrollTrigger({
    target: window ? window() : undefined,
    disableHysteresis: true,
    threshold: 100
  });

  const handleClick = event => {
    const anchor = (event.target.ownerDocument || document).querySelector(
      "#back-to-top-anchor"
    );

    if (anchor) {
      anchor.scrollIntoView({ behavior: "smooth", block: "center" });
    }
  };

  return (
    <Zoom in={trigger}>
      <div onClick={handleClick} role="presentation" className={classes.root}>
        {children}
      </div>
    </Zoom>
  );
}

// ScrollTop.propTypes = {
//   children: PropTypes.element.isRequired,
//   /**
//    * Injected by the documentation to work in an iframe.
//    * You won't need it on your project.
//    */
//   window: PropTypes.func
// };

export default function BackToTop(props) {
  return (
    <React.Fragment>
      <CssBaseline />
      <AppBar>
        <Toolbar>
          <IconButton>
            <MenuIcon
              className={styles.icon}
              edge="end"
              color="inherit"
              aria-label="menu"
            />
          </IconButton>
          <Typography align='center' variant="h5">
            Información
          </Typography>
        </Toolbar>
      </AppBar>
      <Toolbar id="back-to-top-anchor" />
      <Container>
       <Typography></Typography>
      </Container>
      <ScrollTop {...props}>
        <Fab color="secondary" size="small" aria-label="scroll back to top">
          <KeyboardArrowUpIcon />
        </Fab>
      </ScrollTop>
    </React.Fragment>
  );
}}```

Answer 1

问题可能是Toolbar没有将其子项居中。您可以执行类似的操作

const useStyles = makeStyles(theme => ({
  root: {
    position: "fixed",
    bottom: theme.spacing(2),
    right: theme.spacing(2)
  },
  toolBar: {
      display: "flex",
      justifyContent: "center",
      alignItems: "center",
    }
}));

并使用它

 <Toolbar className={classes.toolBar}>
    <IconButton>
        <MenuIcon
           className={styles.icon}
           edge="end"
           color="inherit"
           aria-label="menu"
        />
     </IconButton>
     <Typography align='center' variant="h5">
        Información
     </Typography>
  </Toolbar>