Flexbox를 사용하여 CSS에서 센터링 효과를 얻는 방법

이 글에서는 센터링 효과를 얻기 위한 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는 지원되지 않습니다.

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

위 내용은 모든 사람의 학습에 도움이 되기를 바랍니다. . 더 많은 관련 내용을 보려면 PHP 중국어 웹사이트를 주목하세요!

관련 권장 사항:

CSS3을 사용하여 다채로운 진행률 표시줄 스타일을 만드는 방법

CSS3 위치 지정 및 부동 분석

위 내용은 Flexbox를 사용하여 CSS에서 센터링 효과를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!