Material UI - 在 FlexBox 中垂直居中一个元素答案

【问题标题】：Material UI - center an element vertically inside FlexBoxMaterial UI - 在 FlexBox 中垂直居中一个元素
【发布时间】：2020-04-12 21:12:06
【问题描述】：

在我的反应应用程序中，我创建了一个最小宽度和高度的卡片，它只包含一个标题。我想添加一个弹性框，它将占用整个左侧空间，justify-content="center" 和 align-items="center" 所以当我添加一个循环进度元素时，它将位于卡片的中间。不幸的是，无论我做什么，flexbox 的高度都等于加载微调器的高度，它不会占用整个空间。如何解决？我的组件：

   function AccountSettings({isLoading, id, username, isDisable}) {
        const classes = useStyles();

        return (
            <Card
                className={classes.accountSettings}
            >
                <CardHeader
                    title="Something"
                />
                <Divider/>
                    <Box
                        display="flex"
                        alignItems="center"
                        justifyContent="center"
                        height={"100%"}
                        width={"100%"}
                    >
                        <CircularProgress/>
                    </Box>
            </Card>
        );
    }

我的风格：

import {makeStyles} from "@material-ui/styles";

export default makeStyles(theme => ({
    root: {
        maxWidth: "1000px"
    },
    pageTitle: {
        padding: "5px"
    },
    accountSettings: {
        minWidth: "312px",
        minHeight: "273px",
    }
}));

这是我的主要观点：

<div className={classes.root}>
    <AccountSettings/>
</div>

这张图片显示了我的问题

【问题讨论】：

标签： css reactjs flexbox material-ui

【解决方案1】：

Here is one solution

将以下内容添加到样式中：

accountSettings: {
  display: 'flex',
  flexDirection: 'column'
},
box: {
  flexGrow: 1
}

并将类添加到Box 元素：

<Box
  className={classes.box}

【讨论】：