부트스트랩 및 기타 방법을 사용하여 컨테이너를 수직 중앙에 배치하는 방법은 무엇입니까?

Bootstrap에서 컨테이너를 수직 중앙에 배치하는 방법은 무엇입니까?

유연한 상자를 사용한 수직 정렬

유연한 상자 레이아웃은 수직 정렬을 위한 간단한 솔루션을 제공합니다. Internet Explorer 8 및 9를 제외한 최신 웹 브라우저에서 널리 지원됩니다.

.vertical-center라는 클래스를 만들어 .jumbotron div에 추가합니다.

.vertical-center {
  min-height: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
}

Traditional 레거시 웹 브라우저를 위한 방법

Internet Explorer 8 및 9와 같은 레거시 브라우저의 경우 의사 요소를 사용할 수 있으며 수직 정렬.

.vertical-center {
  height:100%;
  width:100%;
  text-align: center;
  font: 0/0 a;
}

.vertical-center:before {
  content: " ";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.vertical-center > .container {
  max-width: 100%;
  display: inline-block;
  vertical-align: middle;
  font: 16px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
}

고려 사항

• 인라인 요소는 상위 요소의 기준선에 상위 요소의 x 높이 절반을 더한 값에 수직으로 정렬됩니다.
• 인라인 요소를 가운데로 정렬하려면 인라인 요소의 수직 높이를 상위 요소의 높이와 일치하도록 설정해야 합니다.
• 의사 요소는 전체 높이 인라인 블록 요소를 생성하여 수직 정렬을 달성하는 데 사용됩니다.
• 인라인 요소 사이의 간격을 방지하려면 글꼴 속성을 재설정하세요.
• 컨테이너 주변 요소의 위치 지정 및 Z-인덱스를 고려하세요. 적절한 배치.

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