>웹 프론트엔드 >CSS 튜토리얼 >CSS를 사용하여 상위 div 내에서 div를 수직 중앙에 배치하는 방법은 무엇입니까?

CSS를 사용하여 상위 div 내에서 div를 수직 중앙에 배치하는 방법은 무엇입니까?

Mary-Kate Olsen
Mary-Kate Olsen원래의
2024-12-11 01:38:10473검색

How to Vertically Center a Div Within Its Parent Using CSS?

CSS를 사용하여 상위 요소 내

이 쿼리에서 사용자는 "로그인" 상위 div 내에서 "사용자 이름" 및 "양식" div를 수직으로 정렬하는 데 도움을 구합니다. 그들은 "vertical-align: middle;"을 사용하려고 시도했습니다. 속성이 성공하지 못했습니다.

솔루션

최신 브라우저에서 div를 세로로 중앙에 배치하는 최적의 솔루션은 Flexbox입니다.

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

Flexbox가 지원되는 경우 부족합니다(예: IE 9 이하). 이전 방법을 통한 대체 옵션은 다음과 같습니다. 필수입니다.

추가 리소스

  • [Flexbox에 대한 브라우저 지원](https://caniuse.com/?search=flexbox)
  • [안내 Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
  • [CSS 유연한 상자 사용](https://developer.mozilla.org/en -US/docs/Web/CSS/CSS_Flexible_Box_Layout/)

위 내용은 CSS를 사용하여 상위 div 내에서 div를 수직 중앙에 배치하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.