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

Question

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

检查此代码和框 link 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: {/*...*/}
}));