CSS3의 새로운 기능을 요약하여 수직 센터링 구현 방법을 요약합니다.

CSS3의 플렉스 레이아웃 및 이전 의사 요소와 같은 기능은 수직 센터링을 구현하는 데 정말 편리하고 우아합니다. 여기에서는 CSS3의 새로운 기능을 요약하고 수직 센터링 구현 방법을 요약합니다.

0. 한 줄 내용의 중심 맞추기
컨테이너의 높이가 고정되어 있는지 여부에 관계없이 컨테이너에 줄 높이와 높이를 설정하고 두 줄만 고려하는 것이 가장 쉽습니다. ​​​​값을 동일하게 하고 추가하면 됩니다. 오버플로: 숨김

.middle-demo-1{   
height: 4em;   
line-height: 4em;   
overflow: hidden;   
}

장점:
(1) 블록 수준 요소와 인라인 요소 모두 지원
(2).
단점:
(1)
(2) 와 같은 센터링
은 IE에서 지원되지 않습니다. 상대 높이를 사용하여 높이와 줄 높이를 정의하세요
(2). 레이아웃을 망치고 싶지 않다면 Overflow: Hidden 을
해야 합니다. 이유는 무엇인가요?
다음 두 가지 예를 비교해 보세요.

<p style="background: #900; color: #00f; font: bold 12px/24px Helvertica,Arial,sans-serif; height:24px; width:370px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<br/>
<br/>
<p style="background: #090; color: #00f; font: bold 12px/2em Helvertica,Arial,sans-serif; height:2em; width:370px; overflow: hidden;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

이전 높이는 절대 단위인 px이며, 다음 높이의 단위는 숨겨진 오버플로가 없습니다. em은 상대 단위이고 오버플로를 숨깁니다. 브라우저가 글꼴 확대를 지원하는 경우 계속해서 어떤 일이 발생하는지 확인하세요.

1. position:absolute(고정)를 사용하여 left, top, margin-left 및 margin-top 속성을 설정합니다.

.box{   
    position:absolute;/*或fixed*/
    top:50%;   
    left:50%;   
    margin-top:-100px;   
    margin-left:-200px;   
}

2. position:fixed(absolute) 속성을 사용하고, margin:auto를 잊어서는 안 됩니다.

.box{   
    position: absolute;或fixed
    top:0;   
    rightright:0;   
    bottombottom:0;   
    left:0;   
    margin: auto;   
}

3. display:table-cell 속성을 중앙에 사용하세요. 콘텐츠를 세로로

.box{   

display:table-cell;   

vertical-align:middle;   

text-align:center;   

width:120px;   

height:120px;   

background:purple;   

}

4. css3의 새로운 속성인Transform:translate(x,y)를 사용하세요.

.box{   
    position: absolute;   
    transform: translate(50%,50%);   
    -webkit-transform:translate(50%,50%);   
    -moz-transform:translate(50%,50%);   
    -ms-transform:translate(50%,50%);   
}

5. 가장 진보된 방법은 다음을 사용하는 것입니다.

.box{   

position:fixed;   

display:block;   

background:rgba(0,0,0,.5);   

}   

.box:before{   

content:'';   

display:inline-block;   

vertical-align:middle;   

height:100%;   

}   

.box.content{   

width:60px;   

height:60px;   

line-height:60px;   

color:red;

6.Flex 레이아웃;

.box{   
    display: -webkit-box;   
    display: -webkit-flex;   
    display: -moz-box;   
    display: -moz-flex;   
    display: -ms-flexbox;   
    display: flex;   
    水平居中   
    -webkit-box-align: center;   
    -moz-box-align: center;   
    -ms-flex-pack:center;   
    -webkit-justify-content: center;   
    -moz-justify-content: center;   
    justify-content: center;   
     垂直居中    
    -webkit-box-pack: center;   
    -moz-box-pack: center;   
    -ms-flex-align:center;   
    -webkit-align-items: center;   
    -moz-align-items: center;   
    align-items: center;   
}

위 내용은 CSS3의 새로운 기능을 요약하여 수직 센터링 구현 방법을 요약합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!