높이가 100 % 인 플렉스 박스 수직 센터

Question

플렉스 박스를 사용하여 배경색을 위해 세로 및 센터를 맞출 수 있습니까?

.wrapper { 
 
    display: flex; 
 
    width: 100vw; 
 
    height: 100vh; 
 
    text-align: center; 
 
} 
 

 
.item { 
 
    flex: 1; 
 
    background-color: green; 
 
    align-self: center; 
 
    justify-content: center; 
 
}

<div class='wrapper'> 
 
    <div class='item'> 
 
    sdafsdfs 
 
    </div> 
 
</div>

나는 텍스트가 맨 위로 이동하는 height: 100%를 추가하는 경우.

Answer 1

디스플레이 추가 : 상품에 구부러짐. 그런 다음 사용자 요구 사항에 따라 항목을 정렬 할 수 있습니다. 업데이트 된 코드를 살펴보십시오.

.wrapper { 
 
    display: flex; 
 
    width: 100vw; 
 
    height: 100vh; 
 
    text-align: center; 
 

 
} 
 

 
.item { 
 
    display: flex; 
 
    background-color: green; 
 
    align-items: center; 
 
    justify-content: center; 
 
    height: 100%; 
 
    width: 100%; 
 

 
}

<div class='wrapper'> 
 
    <div class='item'> 
 
    sdafsdfs 
 
    </div> 
 
</div>

희망