집 >웹 프론트엔드 >CSS 튜토리얼 >CSS를 사용하여 Div 요소를 수직 중앙에 어떻게 배치할 수 있나요?

CSS를 사용하여 Div 요소를 수직 중앙에 어떻게 배치할 수 있나요?

How Can I Vertically Center a Div Element Using CSS?

의 세로 정렬 CSS를 사용한 요소

이 토론에서는

CSS를 사용하여 상위 컨테이너 내의 요소.

이 문제를 해결하려면 다양한 접근 방식을 사용할 수 있습니다. 효과적인 최신 방법은 요소 배열을 정밀하게 제어할 수 있는 CSS 레이아웃 모듈인 Flexbox를 활용하는 것입니다. 다음 CSS 규칙을 상위 요소에 적용하면 됩니다.

#Login {
    display: flex;
    align-items: center;
}

브라우저에 하위

요소를 수평 방식으로 배치하고(display: flex;로 제어) 중앙에 수직으로 정렬합니다(align-items: center;). 이 접근 방식은 대부분의 최신 브라우저에서 효과적으로 작동합니다.

Internet Explorer 9 이하와 같이 Flexbox 지원이 부족한 구형 브라우저의 경우 대체 솔루션이 필요할 수 있습니다. 수직 요소 정렬을 위한 브라우저 지원 및 고급 CSS 기술에 대한 추가 정보를 제공하는 권장 자료를 살펴보세요.

위 내용은 CSS를 사용하여 Div 요소를 수직 중앙에 어떻게 배치할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：