如何将包含Cards的Paper组件居中显示在屏幕中央？

要完成把Cards组件放入Paper内部并让Paper居中屏幕的需求，只需两步修改：

1. 调整组件嵌套结构 #

将Cards组件直接包裹在Paper组件内部，替换原来的直接渲染方式。

2. 添加居中样式 #

给外层容器设置全屏高度和flex布局，让Paper在屏幕水平、垂直方向都居中，同时给Paper设置合适的内边距和宽度限制，避免内容显示异常。

修改后的完整代码示例：

import * as React from "react";
import Box from "@mui/material/Box";
import Paper from "@mui/material/Paper";
import Cards from "./Cards";

export default function App() {
  return (
    <Box sx={{ minHeight: "100vh", display: "flex", alignItems: "center", justifyContent: "center" }}>
      <Paper sx={{ padding: 4, width: "100%", maxWidth: 800 }}>
        <Cards />
      </Paper>
    </Box>
  );
}

关键样式说明 #

• 外层Box的minHeight: "100vh"确保容器占满整个屏幕高度，display: flex配合alignItems: center、justifyContent: center实现Paper的居中效果
• Paper的padding: 4给内部Cards留出足够的内边距，maxWidth: 800限制Paper在大屏幕上的宽度，保证内容排版美观

内容的提问来源于stack exchange，提问作者Gülsen Keskin