材质用户界面-在FlexBox中垂直居中放置元素

Question

在我的react应用程序中，我创建了宽度和高度均最小的卡，并且仅包含标题。我想添加一个Flexbox，它会用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>

此图显示了我的问题

Answer 1

Here is one solution

在样式中添加以下内容：

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

并将该类添加到Box元素中：

<Box
  className={classes.box}