CSS에서 수직 및 수평 센터링을 달성하는 방법-CSS 튜토리얼-php.cn

CSS에서 수직 및 수평 센터링을 달성하는 방법

不言

풀어 주다： 2018-06-12 15:34:41

원래의

2596명이 탐색했습니다.

이 글은 주로 CSS에서 수직 및 수평 센터링을 구현하는 방법을 소개합니다. 이제는 모든 사람과 공유합니다. 도움이 필요한 친구들은 이를 참조할 수 있습니다.

서문

인터뷰에서 어떻게 사용하는지 묻는 경우가 많습니다. 이를 달성하기 위한 CSS입니다. 특히 필기 시험 문제의 경우 요소의 수직 및 수평 센터링이 상대적으로 일반적입니다. 물론 우리 삶에서는 수직 및 수평 센터링이 필요한 경우가 많습니다.

CSS를 사용하여 세로 및 가로 가운데 맞춤을 달성하는 세 가지 방법

1. 컨테이너 표시의 요소: inline/inline-block

이 상황에서는 컨테이너의 텍스트 정렬을 직접 설정하여 가로 가운데 맞춤을 달성할 수 있습니다. 콘텐츠 요소. 수직 중심을 설정하려면 컨테이너의 높이를 설정한 다음 다음과 같이 쉬운 line-height===height를 설정해야 합니다.

     <p class="container">
        <span>this is text</span>
     </p>

로그인 후 복사

    .container{    
        text-align: center;        
        height: 50px;        
        background: green;        
        line-height: 50px;    
        }

로그인 후 복사

2. 블록, 그리고 요소의 너비와 높이가 알려져 있습니다

이 경우 다음으로 이를 달성하기 위해 오프셋 설정과 결합된 위치 속성을 사용합니다. 먼저 컨테이너의 위치를 상대적으로 설정하고 요소 위치를 절대값으로 설정한 다음 요소(.inner-box)의 오프셋을 위쪽, 왼쪽, 여백-상단, 여백-왼쪽으로 설정합니다. 여기서 위쪽과 왼쪽은 다음으로 설정됩니다. 50% 및 여백 -top/margin-left의 오프셋은 요소 자체의 높이/너비의 절반이며 음수 값입니다.

코드는 다음과 같습니다.

    <p class="container">
        <p class="inner-box"></p>
    </p>

로그인 후 복사

    .container {        
        height: 200px;        
        width: 200px;        
        background: pink;        
        position: relative;    
        }

    .inner-box {       
     position: absolute;        
     top: 50%;        
     left: 50%;        
     margin-top: -50px;        
     margin-left: -50px;        
     height: 100px;        
     width: 100px;        
     background: green;    
     }

로그인 후 복사

3. 컨테이너의 요소는 display:block이고 요소의 너비와 높이를 알 수 없습니다.

이 방법은 2번 방법과 유사하지만 효과가 다르다는 점이 다릅니다. 컨테이너에 있는 요소의 너비와 높이를 알 수 없기 때문에 margin-top/left offset 을 설정하여 달성할 수 없습니다. 이번에는 left/top/bottom/right:0을 설정한 다음 margin:auto를 설정했습니다.
코드는 다음과 같습니다:

    <p class="container">
        <p class="inner-box"></p>
    </p>

로그인 후 복사

    .container {        
        height: 200px;            
        width: 200px;            
        background: pink;            
        position: relative;        
        }

    .inner-box {     
       position: absolute;        
       height: 100px;        
       width: 100px;        
       top: 0;        
       right: 0;        
       left: 0;        
       bottom: 0;        
       margin: auto;        
       background: green;    
       }

로그인 후 복사