Flex isnt aligning

0
votes

I cant get this too work. Im using react and styled components and my justify/aligning isnt working.

div - set to flex, flex-direction is column div - header div div - body div, flex grow set to 1 so that the flexbox takes up the full height of the container

Now the flex item for the body takes up the full height (good) and im trying to center the content in the middle of this div. I have tried all combinations of align/justify on both the parent and body div but it doesnt work and im not sure why. Heres my code

  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

Can anyone see why its not working?

1
cssreactjsflexboxstyled-components

1 Answers

0
votes

On your wrapper:

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