Nie mogę tego zbyt pracować. Używam reakcji i składników stylizowanych, a moje usprawiedliwienie / wyrównanie nie działa.

Div - ustawiony na flex, kierunek flex jest kolumna div - nagłówek Div Div - Body Div, Flex Grow Set do 1, dzięki czemu Flexbox zajmuje pełną wysokość pojemnika

Teraz element Flex dla ciała zajmuje pełną wysokość (dobra) i staram się wyśrodkować treść w środku tego div. Próbowałem wszystkich kombinacji wyrównania / uzasadniają zarówno rodzica, jak i body div, ale nie działa i nie jestem pewien, dlaczego. Heres mój kod

  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 

Czy ktoś może zobaczyć, dlaczego nie działa?

0
testingtestinganyone 22 październik 2020, 00:27

1 odpowiedź

Najlepsza odpowiedź

Na twoim opakowaniu:

display: flex;
justify-content: center;
align-items: center;
0
marc_s 5 listopad 2020, 19:25