수직 센터링을 달성하기 위한 9가지 순수 CSS 메소드 공유

이 글은 수직 센터링에 중점을 두고 있으며, 관심 있는 친구들이 참고하시면 좋을 것 같습니다.

세로 센터링은 레이아웃에서 매우 일반적인 효과 중 하나입니다. 좋은 호환성을 달성하기 위해 PC에서 세로 센터링을 달성하는 방법은 일반적으로 절대 위치 지정, 테이블 셀, 음수 여백 및 기타 방법을 통해 이루어집니다. CSS3를 사용하면 모바일 단말기의 수직 센터링이 더욱 다양해집니다.

방법 1: table-cell

html 구조:

<div class="box box1">
        <span>垂直居中</span>
</div>

css:

.box1{
    display: table-cell;
    vertical-align: middle;
    text-align: center;        
}

방법 2: display:flex

.box2{
    display: flex;
    justify-content:center;
    align-items:Center;
}

방법 3: 절대 위치 지정 및 음수 여백

.box3{position:relative;}
.box3 span{
            position: absolute;
            width:100px;
            height: 50px;
            top:50%;
            left:50%;
            margin-left:-50px;
            margin-top:-25px;
            text-align: center;
        }

방법 4 : 절대 위치 지정 및 0

.box4 span{
  width: 50%; 
  height: 50%; 
  background: #000;
  overflow: auto; 
  margin: auto; 
  position: absolute; 
  top: 0; left: 0; bottom: 0; right: 0; 
}

이 방법은 위와 다소 비슷하지만 여기서는 margin:auto 와 위쪽, 왼쪽, 오른쪽, 아래쪽을 0으로 설정하여 센터링을 수행합니다. 놀랍습니다. 그러나 여기서는 내부 요소의 높이를 결정해야 하며, 이는 모바일 단말기에 더 적합한 백분율을 사용할 수 있습니다.

방법 5: 번역

.box6 span{
            position: absolute;
            top:50%;
            left:50%;
            width:100%;
            transform:translate(-50%,-50%);
            text-align: center;
        }

이것은 실제로 방법 3의 변형이며, 번역을 통해 전환이 이루어집니다.

방법 6: display:inline-block

.box7{
  text-align:center;
  font-size:0;
}
.box7 span{
  vertical-align:middle;
  display:inline-block;
  font-size:16px;
}
.box7:after{
  content:'';
  width:0;
  height:100%;
  display:inline-block;
  vertical-align:middle;
}

이 방법은 정말 영리해요... 공간을 차지하려면 :after를 사용하세요.

방법 7: display:flex 및 margin:auto

.box8{
    display: flex;
    text-align: center;
}
.box8 span{margin: auto;}

방법 8: display:-webkit-box

.box9{
    display: -webkit-box;
    -webkit-box-pack:center;
    -webkit-box-align:center;
    -webkit-box-orient: vertical;
    text-align: center
}

css3은 광범위하고 심오하며 많은 창의적인 효과를 얻을 수 있으므로 연구해야 합니다. 주의하여.

방법 9: display:-webkit-box

이 방법에서는 div가 콘텐츠 요소 외부에 삽입됩니다. 이 div 높이를 설정합니다:50%; margin-bottom:-contentheight;.

content는 플로트를 지우고 중앙에 표시합니다.

<div class="floater"></div>  
<div class="content"> Content here </div>  
.floater {
    float:left; 
    height:50%; 
    margin-bottom:-120px;
}
.content {
    clear:both; 
    height:240px; 
    position:relative;
}

장점:

모든 브라우저에 적용 가능

공간이 충분하지 않은 경우(예: 창이 축소됨) 내용이 잘리지 않고 스크롤 막대가 나타납니다.

단점:

내가 할 수 있는 유일한 것은 추가로 빈 요소가 필요하다고 생각합니다(그렇게 나쁘지는 않습니다. 다른 주제입니다)

위 내용은 수직 센터링을 달성하기 위한 9가지 순수 CSS 메소드 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!