CSS의 수직 및 수평 중앙 정렬 방법 6가지 공유

CSS 중심화를 달성하는 여러 가지 방법을 요약합니다. 참고: *는 일반적인 방법이고, "wrap"은 컨테이너이고, "div"는 중심화되는 요소입니다.

*1.절대 위치, 너비와 높이를 알고 있는 경우 다음 코드를 구현하거나 음수 여백을 사용할 수 있습니다. 🎜>

.div { 
    width: 200px;
    height: 200px;
    margin: auto; 
    position: absolute; 
    top: 0; left: 0; bottom: 0; right: 0; 
}

2. 요소의 너비와 높이를 모르고 특정 div가 상위 요소의 1/2이고 가로 및 세로 중앙에 위치하며 상위 요소의 크기에 비례하여 확대되거나 축소된다는 점만 알아두세요. .

.div{
    position: absolute;
    left: 30%;
    right:30%;
    top: 25%;
    bottom:25%;
}

*3.translate, 너비를 알고 높이를 알 수 없는 경우

.wrap{
    width:200px;//也可以不写，默认占总宽度的50%
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
}

4.table-cell, div 자체의 높이를 알 수 없고 세로 센터링만 하는 경우 구현되었습니다, ps. 이 경우 div 너비는 100%

.wrap{//外层容器
    display: table;
}
.div{//内层容器
    display: table-cell; 
    vertical-align: middle; 
}

*5.flex 레이아웃입니다. 너비가 고정되지 않은 경우 상위 컨테이너에 display:flex를 설정하면 됩니다.

으으으으

6. 해킹 방법,

:after를 잘 사용합니다. 아아아아

위 내용은 CSS의 수직 및 수평 중앙 정렬 방법 6가지 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!