垂直对齐屏幕中间的按钮[重复]

Question

虽然我的按钮水平居中，但它们不在屏幕中间。我尝试添加verticalAlign：'middle'，但没有任何区别。我还想增加按钮的宽度，但如果我添加 width: '200px' 等，按钮会从中间出现在左侧。我还能尝试什么：

const useStyles = makeStyles((theme) => ({
  content: {
    paddingLeft: "280px",
    paddingTop: "100px",
    backgroundColor: "white"
    //height: '100%',
  },
  buttons: {
    textAlign: "center"
    //width: '200px',
  }
}));

function Page() {
  const classes = useStyles();
  return (
    <div>
      <PermanentDrawerLeft></PermanentDrawerLeft>
      <main className="content">
        <div className={classes.buttons}>
          <Button variant="contained" color="secondary">
            First
          </Button>
          <br />
          <br />
          <Button variant="contained" color="secondary">
            Second
          </Button>
        </div>
      </main>
    </div>
  );
}

代码沙盒：https://codesandbox.io/s/tulc2?file=/src/Overfitting.tsx

Answer 1

尝试使用 flexbox，如下所示：

   .content {
  height: 100vh;
  padding-left: 280px;
  padding-top: 100px;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}