Bootstrap에서 컨테이너를 수직 중앙에 배치하는 방법: Flexbox와 의사 요소?

부트스트랩에서 컨테이너를 수직 중앙에 배치하는 방법

유연한 상자 레이아웃 사용(현대적인 방법)

최신 브라우저의 경우, Flexbox를 사용하여 컨테이너를 수직으로 중앙에 배치할 수 있습니다. 레이아웃:

<div class="jumbotron vertical-center">
  <div class="container">
    ...
  </div>
</div>

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

:before 의사 요소 사용(레거시 방법)

이전 브라우저의 경우 ::before pseudo-를 사용할 수 있습니다. 컨테이너를 정렬할 전체 높이 요소를 생성하는 요소 수직:

<div class="jumbotron vertical-center">
  <div class="container">
    ...
  </div>
</div>

.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;
}

추가 고려 사항

• 작은 화면에서 예상치 못한 문제를 방지하기 위해 ::before pseudo의 높이를 재설정할 수 있습니다. -요소를 자동 또는 0으로 설정합니다.
• 컨테이너 주변에 바닥글/머리글 섹션이 있는 경우 적절하게 배치하고 상위에 유지하려면 더 높은 Z-색인 값을 추가하세요.

위 내용은 Bootstrap에서 컨테이너를 수직 중앙에 배치하는 방법: Flexbox와 의사 요소?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!