React中如何在Material UI的AppBar内小屏幕居中Box组件

在React项目中使用Material UI开发响应式导航栏时，小屏幕（平板/手机）下指定的Logo Box组件无法居中显示。相关代码如下：

<AppBar elevation={1} position="sticky" sx={{background: 'rgb(255 255 255)', py: "10px"}}>
  <Container maxWidth="xl">
      <Toolbar disableGutters>
          <Box onClick={() => undefined} sx={{height: 80, width: 80, display: { xs: 'none', md: 'flex' },}} component="img" alt="Your logo." src={logo}/>
          {/**Appear on Tablet and phone**/}
          <Box sx={{ display: { xs: 'flex', md: 'none' } }}>
              <IconButton
                  size="large"
                  aria-haspopup="true"
                  onClick={handleOpenNavMenu}
                  color="#000000"
              >
                  <MenuIcon />
              </IconButton>
              <Menu
                  id="menu-appbar"
                  anchorEl={anchorElNav}
                  anchorOrigin={{
                      vertical: 'bottom',
                      horizontal: 'left',
                  }}
                  keepMounted
                  transformOrigin={{
                      vertical: 'top',
                      horizontal: 'left',
                  }}
                  open={Boolean(anchorElNav)}
                  onClose={handleCloseNavMenu}
                  sx={{
                      display: { xs: 'block', md: 'none' },
                      background: 'trasparent'
                  }}
              >
              {pages.map((page, index) => (
                  <MenuItem key={index} onClick={handleCloseNavMenu}>
                      <Typography textAlign="center">{page}</Typography>
                  </MenuItem>
              ))}
              </Menu>
          </Box>
          {/**Image appear on Tablet and phone and is supposed to be at center**/}
          <Box onClick={() => undefined} sx={{height: 80, width: 80, display: { xs: 'flex', md: 'none' }, mr: 1 }} component="img" alt="Your logo." src={logo}/>
          {/**Appear on Desktop**/}
          <Tabs aria-label="visible arrows tabs example" sx={{marginLeft: '5px', marginRight: '5px', width: 'auto', display: { xs: 'none', md: 'flex' }}} value={tabValue} onChange={handleTabChange} indicatorColor='#162667'>
              <Tab sx={{fontSize: '12px'}} label="Home"/>
              <Tab sx={{fontSize: '12px'}} label="Find a Store"/>
              <Tab sx={{fontSize: '12px'}} label="How To Avail Offer"/>
              <Tab sx={{fontSize: '12px'}} label="T & C"/>
              <Tab sx={{fontSize: '12px'}} label="Contact Us"/>
          </Tabs> 
          <Box onClick={() => undefined} sx={{width: 110, ml: 'auto', display: { xs: 'none', md: 'flex' },}} component="img" alt="Your logo." src={logo2}/>
      </Toolbar>
  </Container>
</AppBar>

需要居中的是这段代码：

<Box onClick={() => undefined} sx={{height: 80, width: 80, display: { xs: 'flex', md: 'none' }, mr: 1 }} component="img" alt="Your logo." src={logo}/>

问题核心是Toolbar默认采用Flex布局，当前的Logo Box只是普通flex子元素，没有占据足够横向空间来实现居中。只需修改该Box的sx样式，添加两个关键属性：

<Box onClick={() => undefined} sx={{
  height: 80,
  width: 80,
  display: { xs: 'flex', md: 'none' },
  mr: 1,
  // 新增以下两行
  flexGrow: 1,
  justifyContent: 'center'
}} component="img" alt="Your logo." src={logo}/>

原理说明： #

• flexGrow: 1：让这个Box占据Toolbar中除左侧菜单按钮外的所有剩余空间，确保它有足够的横向范围来容纳居中逻辑。
• justifyContent: 'center'：在Box自身的flex容器内，将内部的图片元素水平居中。

修改后，小屏幕下的Logo即可正常居中显示。

内容的提问来源于stack exchange，提问作者Irfan