时间戳

首页 > 解决方案 > Material UI - 在 FlexBox 中垂直居中一个元素

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

问题描述

在我的反应应用程序中，我创建了一个最小宽度和高度的卡片，它只包含一个标题。我想添加一个 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>

这张图片显示了我的问题 问题

标签： cssreactjsflexboxmaterial-ui

解决方案

这是一种解决方案

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

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

并将类添加到Box元素中：

<Box
  className={classes.box}

推荐阅读