CSS에서 중앙 정렬 효과를 얻기 위해 Flexbox를 사용하는 예 공유

이 글에서는 CSS에서 센터링 효과를 얻기 위해 Flexbox를 사용하는 사례를 공유합니다. IE 브라우저의 호환성 문제에 주의하세요. 도움이 필요한 친구가 참고할 수 있습니다.

CSS의 향후 개발 방향은 Flexbox를 사용하는 것입니다. . 수직 센터링과 같은 일반적인 문제를 해결하도록 설계되었습니다. Flexbox에는 중앙에 배치하는 방법이 여러 가지가 있습니다. 또한 열을 나누고 이상한 레이아웃 문제를 해결하는 데에도 사용할 수 있습니다.

.Center-Container.is-Flexbox {   
  display: -webkit-box;   
  display: -moz-box;   
  display: -ms-flexbox;   
  display: -webkit-flex;   
  display: flex;   
  -webkit-box-align: center;   
     -moz-box-align: center;   
     -ms-flex-align: center;   
  -webkit-align-items: center;   
          align-items: center;   
  -webkit-box-pack: center;   
     -moz-box-pack: center;   
     -ms-flex-pack: center;   
  -webkit-justify-content: center;   
          justify-content: center;   
}

장점:

콘텐츠의 높이와 너비는 제한되지 않으며 오버플로가 잘 수행됩니다.
다양한 고급 레이아웃에 사용할 수 있습니다. 기술

동시에 참고: IE8-9는 지원되지 않습니다

본문에 스타일을 작성해야 하거나 추가 컨테이너가 필요합니다
호환되려면 다양한 제조업체 접두사가 필요합니다. 최신 브라우저
잠재적인 성능 문제가 있을 수 있습니다

위 내용은 CSS에서 중앙 정렬 효과를 얻기 위해 Flexbox를 사용하는 예 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!