CSS flex 레이아웃으로 div 위아래 좌우 수직 가운데 맞춤

CSS flex 레이아웃으로 div 위아래 좌우 수직 가운데 맞춤
레이아웃의 전통적인 해결 방안은 박스 모델을 바탕으로 디스플레이 속성 +position 속성 +float 속성에 의존한다.그것은 수직으로 가운데에 있으면 실현하기 어려운 특수한 구조에 매우 불편하다.2009년에 W3C는 다양한 페이지 레이아웃을 간편하고 완전하며 호응적으로 실현할 수 있는 새로운 방안을 제시했다.현재, 그것은 이미 모든 브라우저의 지원을 받았는데, 이것은 현재 이 기능을 안전하게 사용할 수 있다는 것을 의미한다.Flex 레이아웃은 향후 레이아웃의 최우선 선택이 될 것입니다.본고는 주로 Flex를 이용하여 수직 중심 배치를 실현하는데 코드는 다음과 같다.

html  

	

	       
    
	


style  
   .main{
      display: flex;
      width: 100%;  //             
      height: 100%;
      border: 1px solid #2b333f;
      box-sizing: border-box;
    }
    .middle{
      margin: auto;
    }

PS:vue기술교류군(864583465)에 가입하여 더 많은 문제에 대한 연구를 진행하는 것을 환영합니다. 당신의 문제는 우리 모두가 함께 발전하는 관건이 될 것입니다.