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

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

html 구조

<p>
    <span>垂直居中</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> 和 </td><th>）
    text-align:center;       //左右居中
    vertical-align:middle;   //上下居中        
}<p style="text-align: center;"><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/024/65cfcfdbc7e93d675d00fcd8bf2d6403-0.png?x-oss-process=image/resize,p_40" class="lazy" alt=""></p>
<p><span style="font-size: 18px"><strong>2이 포함되어 있습니다. <span style="color: #000000">display: flex; </span></strong>IE8, IE9</span></p>
<p>과 호환되지 않습니다. 신장 . Firefox 및 Google과 호환<span style="font-size: 18px"><span style="color: #000000"><span style="font-size: 14px"><strong>참조 플렉스 레이아웃: https://www.cnblogs.com/qingchunshiguang/p/8011103.html<span style="font-size: 18px"><span style="color: #000000"><span style="font-size: 14px"></span></span><pre class="brush:php;toolbar:false">.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 중국어 웹사이트의 기타 관련 기사를 참조하세요!