小编Mit*_*chy的帖子

我想将我的Appbar内容居中，这样在较大的显示器上时它就不会散布到屏幕的两侧。有一些图片展示了它的外观和我想要的外观。

问题是，在较小的屏幕上，页面Appbar内容和页面内容都适合屏幕，但在较大的显示器上，Appbar内容继续扩散，而页面内容保持居中。因此，我希望Appbar保持全角，而其内容与页面内容保持在同一位置 - 正如您在第二个屏幕中看到的那样。

我的页面代码：

<Box sx={{ display: "flex" }}>
  <CssBaseline />
  <AppBar
    position="fixed"
    sx={{
      marginTop: "10px",
      width: `100%`,
    }}
  >
    <Toolbar>
      <IconButton
        color="inherit"
        aria-label="open drawer"
        edge="start"
        sx={{ mr: 2, display: { sm: "none" } }}
      >
        <MenuIcon />
      </IconButton>
      <Box
        sx={{
          borderBottom: 1,
          borderColor: "divider",
          mr: 2,
          display: { xs: "none", sm: "block", md: "block" },
        }}
      >
        <Tabs
          aria-label="basic tabs example"
          TabIndicatorProps={{
            style: {
              background: "#ffffff",
            },
          }} …