Flexbox와 기존 방법을 사용하여 부트스트랩에서 컨테이너를 수직 중앙에 배치하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

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

Patricia Arquette

풀어 주다： 2024-12-17 00:07:24

원래의

237명이 탐색했습니다.

How to Vertically Center a Container in Bootstrap Using Flexbox and Traditional Methods?

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

Bootstrap을 사용하여 작업할 때 특히 jumbotron 구성 요소 내에서 수직 정렬이 필요한 경우가 많습니다. 이 기사에서는 유연한 상자와 전통적인 방법을 사용하여 이를 달성하기 위한 두 가지 접근 방식을 살펴봅니다.

유연한 상자 접근 방식

유연한 상자 레이아웃의 출현으로 수직 정렬이 크게 단순화되었습니다. 이 방법은 display: flex 속성과 center로 설정된 align-items 속성을 활용합니다.

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

로그인 후 복사

레거시 브라우저에 대한 전통적인 접근 방식

Internet Explorer 8 및 9 호환성을 위해 전통적인 접근 방식 의사 요소와 인라인 블록 요소를 활용하는 것이 좋습니다. 이 방법에는 전체 높이의 의사 요소를 생성하고, 수직 정렬을 중간으로 설정하고, 의사 요소와 컨테이너 요소의 표시를 모두 인라인 블록으로 설정하는 작업이 포함됩니다.

.vertical-center {
  height: 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;
}

로그인 후 복사