CSS 가로, 세로 가운데 맞춤 5가지 최적 시나리오

2411 단어
CSS 가운데 맞춤
  • 코드에서 브라우저 접두사 생략
  • 아래의 예는 나의 개인 기준으로 정렬
  • 물론 중간 처리 방법도 많지만 이 다섯 가지 방법만이 가장 완벽한 해결 방안이라고 생각합니다
  • flex 가운데 맞춤
    장점: 알 수 없는 높이의 가운데 맞춤 처리 가능
    
    
    


    position+translate 가운데
    장점: 미지의 높이를 가운데로 처리할 수 있고 끼워 넣을 수 있는 최소 단점:translate가 구글 내 핵 아래에 소수점(%위험)을 설정할 때 문자가 떨리고 모호해지는 현상이 나타난다.(translate3d(-50%,-50%,0)를 설정하면 떨림의 모호함이 여전히 존재하는 것을 해결할 수 있다).
    
    
    


    table-cell 가운데
    단점가운데 레이어에는 너비(.center)를 설정해야 합니다.2. 바깥쪽을 한 겹 더 끼워넣기(.cell) 3.가운데 레이어에 너비를 설정해야 합니다(허용%)
    
    
    


    전통 거중(2종)
    단점margin 값은 auto여야 합니다.2. 가운데에 있는 레이어는 두께(허용%)를 설정해야 합니다.
    
    
    


    단점: 중간층에 고정된 넓이를 설정해야 하고magin은 높은 넓이를 통해 계산해야 한다.
    
    
    

    좋은 웹페이지 즐겨찾기