Flex未对齐

Question

这件事我也办不到。我使用的是react和styled组件，我的对齐/对齐不起作用。

DIV-设置为flex，FLEX-方向为列DIV-标题div DIV-主体div，flex生长设置为1，以便flexbox占据容器的全部高度

现在，身体的flex项占据了整个高度（良好），我试图将内容居中在这个div的中间。我已经尝试了所有的Align/Justify组合，但都不起作用，我不知道为什么。这是我的代码

  const Div = styled.div`
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  justify-items: center;

  & > * :nth-child(2){
    flex-grow: 1;
    background-color: red;
    /* position:relative; */
    /* align-self: center; */

  }

`



 const OuterWrapper = styled.div`
  padding:  10vw 1.5rem;
  overflow: hidden;
  // this is the div that contains content that i want to center 

有人知道它为什么不起作用吗？

Answer 1

包装上：

display: flex;
justify-content: center;
align-items: center;