CSS - 문제 미리보기
문제 1279
hard
다음 상황에서 가장 적절한 세로 가운데 정렬 방법은?
조건:
• 콘텐츠의 높이를 미리 알 수 없음
• IE10+ 지원 필요
• 텍스트가 여러 줄일 수 있음
```css
.container {
height: 300px;
position: relative;
}
.content {
position: absolute;
top: 50%;
left: 50%;
_____: translate(-50%, -50%);
}
```
정답: B
position + transform 조합의 정교한 활용:
이 방법이 최적인 이유:
동적 크기 대응:
• 콘텐츠 높이를 미리 알 필요 없음
• 런타임에 자동 계산되어 정확한 중앙 배치
• 텍스트 줄 수 변화에도 자동 적응
transform: translate(-50%, -50%) 원리:
• -50%: 요소 자신의 크기 기준으로 이동
• 가로 -50%: 자신의 너비만큼 왼쪽으로
• 세로 -50%: 자신의 높이만큼 위로
• 결과: 정확한 중앙 위치
전체 동작 과정:
1. `position: absolute` → 일반 흐름에서 분리
2. `top: 50%, left: 50%` → 왼쪽 상단 모서리를 중앙에 배치
3. `transform: translate(-50%, -50%)` → 요소 중심을 실제 중앙으로 이동
💡 학습 팁
이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.