Material-UI Pagination 分页组件如何实现按钮居中显示？

不生效原因 #

textAlign: center仅对行内/行内块元素生效，而Material-UI的Pagination组件根元素默认是块级flex容器，内部的页码、箭头按钮都是flex子项，因此外层的textAlign属性无法控制flex子项的对齐效果。

解决方案 #

方案1：直接给Pagination组件配置sx属性（推荐，无需额外外层容器）

利用MUI v5自带的sx属性修改根元素的flex对齐规则：

import Pagination from '@mui/material/Pagination';

function App() {
  return (
    <Pagination
      count={10} // 替换为你的总页数配置
      sx={{
        justifyContent: 'center'
      }}
    />
  );
}

方案2：外层容器用flex布局控制

如果你需要保留外层div包裹的结构，给外层div设置flex布局的对齐属性即可：

<div style={{ display: 'flex', justifyContent: 'center' }}>
  <Pagination count={10} />
</div>

方案3：封装复用的居中分页组件

如果项目中多处需要用到居中的分页组件，用styled封装更便于统一维护：

import { styled } from '@mui/material/styles';
import Pagination from '@mui/material/Pagination';

const CenteredPagination = styled(Pagination)({
  justifyContent: 'center'
});

// 调用时直接使用组件即可
<CenteredPagination count={10} />

方案4：全局主题配置统一生效

如果要让项目内所有Pagination组件默认都居中，直接修改MUI全局主题的样式覆盖规则：

import { createTheme, ThemeProvider } from '@mui/material/styles';

const theme = createTheme({
  components: {
    MuiPagination: {
      styleOverrides: {
        root: {
          justifyContent: 'center'
        }
      }
    }
  }
});

// 用ThemeProvider包裹项目根组件
function App() {
  return (
    <ThemeProvider theme={theme}>
      {/* 你的项目其他代码 */}
      <Pagination count={10} />
    </ThemeProvider>
  );
}

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