提问者:小点点

Flex未对齐


这件事我也办不到。我使用的是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 

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


共1个答案

匿名用户

包装上:

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