在 React 中将卡片放在页面的中心

Question

我有一个简单的问题，就是将卡片放在页面中心。我已经输入了alignItems: center 和justifyContent: center，但它仍然没有显示在中心页面上。

检查此代码框链接CLICK HERE

代码

const useStyles = makeStyles(() => ({
  root: {
    minWidth: 275,
    justifyContent: "center",
    alignItems: "center"
  },
  cardHeader: {
    backgroundColor: "blue",
    color: "white",
    display: "flex",
    justifyContent: "center",
    alignItems: "center"
  }
}));

Answer 1

您可以在父级上使用 flex，注意您需要设置 height 以便它会相应地居中。

const useStyles = makeStyles(() => ({
  root: {
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    height: "100vh"
  },
  cardHeader: {/*...*/}
}));