백분율 높이 Div 내부에 Div를 수직 중앙에 배치하는 방법은 무엇입니까?

백분율 높이 Div 내에서 Div의 수직 정렬

백분율 기반 높이를 가진 다른 div 내에서 div를 수직으로 배치하면 웹에서 공통적인 과제가 될 것 개발.

질문: 백분율 기반 높이가 있는 div 내에서 div를 세로로 가운데에 배치할 수 있습니까?

답변: 예 , 다양한 기술을 사용하여 수직 센터링을 달성하는 것이 가능합니다. 널리 사용되는 접근 방식은 CSS 속성 display: table-cell 및 vertical-align: middle을 활용하는 것입니다.

display: table-cell 내부 div에서는 테이블의 요소가 되며 테이블 셀의 속성을 상속합니다. 그러면 vertical-align: middle 속성이 테이블 내에서 셀을 수직으로 정렬합니다.

예를 들어 다음 코드를 고려해보세요.

.parent-div {
  height: 50%;
}

.child-div {
  display: table-cell;
  vertical-align: middle;
}

이 예에서

child-div는 parent-div 내에서 수직 중앙에 위치합니다. 50% 높이.

이 접근 방식은 대부분의 브라우저에서 잘 작동하지만 Internet Explorer 6은

display: table-cell 속성을 ​​지원하지 않는다는 점에 유의하는 것이 중요합니다. 따라서 IE6에서는 대체 방법이나 브라우저 간 호환성 솔루션을 고려해야 할 수도 있습니다.

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