본문 바로가기
CSS HTML5/css

[css] height:100vh 세로 중앙 정렬하는 2가지 방법

by KJY.Design 2025. 6. 16.
반응형

1.  height:100vh 세로 중앙 정렬하는 방법

flexbox 사용하기

display: flex;를 사용하면 부모 요소 안의 자식 요소를 세로로 중앙에 쉽게 배치할 수 있습니다.

 
.container {
 
display: flex;
 
justify-content: center; /* 가로 중앙 */
 
align-items: center; /* 세로 중앙 */
 
height: 100vh; /* 화면 전체 높이 */
 
}
 

align-items 속성 설명

  • center: 중앙 정렬
  • flex-start: 위쪽 정렬
  • flex-end: 아래쪽 정렬

 

 

2. 요소를 가로, 세로 중앙 정렬하는 방법

position 속성 사용하기

position 속성을 활용하여 요소를 가운데에 정렬할 수 있습니다.

 
.box {
 
position: absolute;
 
top: 50%;
 
left: 50%;
 
transform: translate(-50%, -50%);
 
}

 

반응형