如何使用使用样式化组件构建的Responsive React网格系统进行垂直居中？

Question

我正在使用grid-styled制作布局。

我目前有以下内容：

如何使红色/绿色项目在蓝色容器中垂直居中？

这是我的代码，我正确地这样做了吗？

...

const Container = styled(Box)`
  max-width: 1100px;
  background: violet;
`;
Container.defaultProps = {
  mx: 'auto',
};

.....

  <Box style={{ backgroundColor: 'darkBlue', minHeight: 500 }}>
    <Container>
      <Flex wrap>
        <Box
          p={36}
          width={[1, 1 / 2]}
          style={{ backgroundColor: 'red' }}
        >
          {content[0]}
        </Box>
        <Box
          p={36}
          width={[1, 1 / 2]}
          style={{ backgroundColor: 'green' }}
        >
          {content[1]}
        </Box>
      </Flex>
    </Container>
  </Box>

帮助表示赞赏。

Answer 1

你需要传递道具来告诉Flex（flexbox）你想要做什么。

<Flex>接受flexDirection align和justify道具，告诉它如何对齐孩子。

试试这个：

<Flex flexDirection="row" align="center" justify="center" wrap>