React+Material-UI实现底部悬浮Chip/FAB遇水平居中问题求助

嘿，我来帮你搞定这个居中的小问题！你现在遇到的情况是因为fixed定位的元素不能用margin: 0 auto或者left/right: auto来居中——这类方法只对文档流内的块级元素有效，而fixed元素脱离了文档流，视口才是它的参考容器，所以原来的样式起不了作用。

给你两种靠谱的解决方案：

方案一：用transform + left:50%实现精准居中 #

这是最通用的固定元素居中方法，不管元素宽度是多少都能完美居中，兼容性也拉满：

const useStyles = makeStyles((theme: Theme) => createStyles({
  root: {
    position: 'fixed',
    bottom: theme.spacing(2),
    // 核心代码
    left: '50%',
    transform: 'translateX(-50%)',
  },
}));

// 后续使用保持不变
const classes = useStyles(); 
return ( 
  <Chip 
    className={classes.root} 
    variant="outlined" 
    avatar={<SyncIcon />} 
    label="Clickable" 
    onClick={handleClick}
  /> 
);

原理很简单：left:50%把元素的左边缘移到视口的正中间，transform: translateX(-50%)再把元素向左移动自身宽度的一半，这样整个元素就完全居中啦。

方案二：用Material-UI的Box组件包裹实现居中 #

如果你更习惯用Material-UI的内置布局工具，可以用Box组件来做容器，利用flex布局实现居中：

import { Box } from '@material-ui/core';

// 不需要额外的makeStyles，直接用sx属性
return (
  <Box 
    sx={{
      position: 'fixed',
      bottom: theme.spacing(2),
      width: '100%', // 让容器占满视口宽度
      display: 'flex',
      justifyContent: 'center', // flex布局水平居中
    }}
  >
    <Chip 
      variant="outlined" 
      avatar={<SyncIcon />} 
      label="Clickable" 
      onClick={handleClick}
    />
  </Box>
);

这种方法更符合Material-UI的设计思路，如果你已经在项目里大量使用Box或者Grid组件，这个方案会更顺手。

选其中一种方法替换你原来的样式，就能实现你想要的类似Instagram/谷歌信息流的居中悬浮按钮效果啦！

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