Material UI 网格居中

Question

我正在尝试理解 Material UI 的网格系统并在 React.js 上使用它，但到目前为止它有点令人困惑。无论视口大小如何，我都希望将微调加载器和文本居中。我可以将第一个加载器微调器放置在中间，但文本似乎总是中断对齐或沉到底部，就像在这段代码中所做的那样。我想我必须使用像 xs={2} 这样的属性，但不确定它们是如何工作的？我可以得到一些帮助吗？

这是我的代码：

const useStyles = makeStyles(theme =>
  createStyles({
    root: {
      marginTop: theme.spacing(6)
    },
    spinner: {
      color: 'rgba(255, 255, 255, 0.2)',
      minHeight: '100vh'
    }
  })
);

<Grid container spacing={0} direction="column" alignItems="center" justify="center" className={classes.spinner}>
      <Grid item>
        <FontAwesomeIcon icon="circle-notch" spin className={classes.spinner} size="5x" />
      </Grid>
      <Grid item>
        <Translate contentKey={labelKey}>Waiting for show to start</Translate>
      </Grid>
    </Grid>
  );

Answer 1

答案很简短，但会起作用

<Grid item align="center">

Answer 2

我把 flexbox 换成了@sidecus。这个网格有点矫枉过正。

root: {
    position: 'fixed',
    top: ' 50%',
    left: '50%',
    transform: 'translate(-50%, -50%)'
  },
  spinner: {
    color: 'rgba(255, 255, 255, 0.2)'
  },
  text: {
    textAlign: 'center'
  }

Material UI 网格居中

Material UI Grid Centring

css

reactjs

material-ui

centering