资料用户界面卡内容不对中

Question

我正在材料用户界面工作，并已经建立了一张卡片，在那里，我想要集中文字水平和垂直。输入只集中于文本水平，它仍然停留在卡片的顶部，我不知道为什么。我已经准备好了材料UI文档，它应该都能工作。

码

<Card className={classes.root}>
  <CardContent className={classes.bigCard}>
    <Grid 
      align="center"
      container
      direction="column"
      justify="center"
      spacing={0}
      style={{ backgroundColor: 'teal' }}
    >
      <Grid item style={{ backgroundColor: 'yellow' }}>
        <h1>hey</h1>
      </Grid>
    </Grid>
  </CardContent>
</Card>

Answer 1

在您的第一个外部网格组件上尝试这样做：

<Grid 
  direction="column"
  justify="center"
  alignItems="center"
  spacing={0}
  style={{ backgroundColor: 'teal' }}
 />

我不知道为什么网格中有一个网格，但是我相信Grid组件已经在下面实现了灵活的CSS模型。这意味着他们正在使用柔性盒作为他们的特性。用柔性盒对某些东西进行居中的最好方法是：

<ContainerDiv 
  styles={{
     display: 'flex', 
     alignItems: 'center', 
     justifyContent:'center'
}}>
  <Content> This will be centered </Content> 
</ContainerDiv>

这是一个很好的阅读：https://css-tricks.com/snippets/css/a-guide-to-flexbox/材料UI是基于它的。

希望这能解决你的中心需求。:)