Javascript 垂直对齐屏幕中间的按钮

虽然我的按钮水平位于中间，但它们不在屏幕的中间。我尝试添加垂直对齐：“中间”，但没有什么区别。我还想增加按钮的宽度，但如果我增加宽度：“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>
  );
}

const useStyles=makeStyles（（主题）=>({
内容：{
填充左：“280px”，
paddingTop：“100px”，
背景颜色：“白色”
//高度：“100%”，
},
按钮：{
textAlign：“居中”
//宽度：“200px”，
}
}));
功能页（）{
const classes=useStyles（）；
返回(
弗斯特




第二
);
}

---

Codesandbox:

尝试使用flexbox，如下所示：

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