CSS에서 수직 센터링을 달성하는 6가지 방법(코드 예)

이 기사에서는 CSS(코드 예제)에서 수직 중앙 정렬을 달성하는 6가지 방법을 제공합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

html 구조

<p class="box box2">
    <span class="content content2">垂直居中</span></p>

기본 CSS 스타일 구조

.box{
    width:200px;
    height:200px;
    background-color:green;   
}
.content{
    background-color:yellow;   
}

1.table-cell

이 방법은 IE8+, Firefox, Google 및 콘텐츠와 호환됩니다. 폭 그리고 키는? 참고: IE8+에는 IE8

.box2{
    display:table-cell;      //此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
    text-align:center;       //左右居中
    vertical-align:middle;   //上下居中        
}

2이 포함되어 있습니다. display: flex; IE8, IE9

과 호환되지 않습니다. 신장 . Firefox 및 Google과 호환참조 플렉스 레이아웃: https://www.cnblogs.com/qingchunshiguang/p/8011103.html

.box2{
    display: flex;
    justify-content:center;  //左右居中
    align-items:center;      //上下居中
}

3. edge Distance

이 방법은 IE8+, Firefox, Google과 호환됩니다.

콘텐츠에는 너비와 높이가 있어야 합니다

.

.box2{
    position:relative;
}
.content2{
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-40px;
    margin-left:-40px;
}

4. 절대 위치 지정 및 0

이 방법은 IE8+, Firefox, Google과 호환되며 콘텐츠에는 너비와 높이가 있어야 합니다.

.box2{
    position:relative;
}
.content2{
    margin:auto;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

5. 절대 위치 지정 및 변환

이 방법은 IE8과 호환되지 않지만 IE9+, Firefox, Google,

과 호환됩니다. 키.

.box2{
    position:relative;
}
.content2{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

6. display:flex 및 margin:auto

content의 너비와 높이: IE8, IE9와 호환되지 않습니다.

콘텐츠에는 너비와 높이가 없습니다. IE와 호환되지 않습니다. 너비나 높이에 관계없이 Firefox 및 Google과 호환됩니다.

.box2{
    display: flex;
    text-align: center;
}
.box2 .content2{margin: auto;}

위 내용은 CSS에서 수직 센터링을 달성하는 6가지 방법(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!