지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > CSS 튜토리얼 > CSS를 사용하여 상위 항목 내에서 Div를 수직으로 가운데에 배치하는 방법은 무엇입니까?

CSS를 사용하여 상위 항목 내에서 Div를 수직으로 가운데에 배치하는 방법은 무엇입니까?

Patricia Arquette
풀어 주다： 2024-12-15 00:26:13
원래의
833명이 탐색했습니다.

How to Center a Div Vertically within its Parent Using CSS?

CSS를 사용하여 상위 항목 내에서 수직으로

웹 디자인 영역에서 요소를 수직 및 수평으로 정확하게 정렬하는 기능은 시각적으로 매력적이고 사용자 친화적인 인터페이스를 만드는 데 중요합니다. 수직 정렬이 중요해지는 일반적인 시나리오 중 하나는

질문:

CSS를 사용하시나요?

답변:

최신 접근 방식(Flexbox):

가장 효과적인 수직 정렬 방법은 다음과 같습니다. 강력한 CSS 레이아웃 모듈인 Flexbox를 활용하세요. 상위 요소의 표시 속성을 flex로 설정하고 항목 정렬을 가운데로 설정하면 모든 하위 요소를 상위 요소 내에서 수직으로 정렬할 수 있습니다.

#parent-element {
    display: flex;
    align-items: center;
}
로그인 후 복사

이 접근 방식은 안정적이고 브라우저 간 호환 가능한 솔루션을 제공합니다.

레거시 방법(이전 브라우저용):

이전 브라우저의 경우 Flexbox를 지원하지 않는 경우 대체 방법은 다음과 같습니다.