반응형

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%); |
|
} |
반응형
'CSS HTML5 > css' 카테고리의 다른 글
[css/script] 실무 적용 d-day 활용 카운트다운 소스 (0) | 2025.07.03 |
---|---|
[CSS] Transform 속성 쉽게 배우기 – 이동, 확대, 회전, 기울이기 (0) | 2025.06.20 |
Flex CSS 완벽 가이드: Flexbox로 레이아웃 자유자재로 다루기 (1) | 2025.06.16 |
버튼 스타일시트 (0) | 2016.11.09 |
[css] css로 이미지 롤오버하기 (0) | 2016.11.09 |