6 façons d'obtenir un centrage vertical en CSS (exemple de code)

Ce que cet article vous apporte, c'est de vous présenter 6 façons de réaliser un centrage vertical en CSS (exemples de code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

structure HTML

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

structure de style CSS par défaut

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

1. table-cell

Cette méthode est compatible avec IE8+, Firefox, Google, et peu importe que le contenu a une largeur ou une hauteur. Remarque : IE8+ inclut IE8

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

2. : flex; 

Cette méthode n'est pas compatible avec IE8, IE9, Peu importe que le contenu ait une largeur ou une hauteur. Compatible avec Firefox, Google

Mise en page flexible de référence : https://www.cnblogs.com/qingchunshiguang/p/8011103.html

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

3. Positionnement absolu et marges négatives

Cette méthode est compatible avec IE8+, Firefox et Google Le contenu doit avoir une largeur et une hauteur.

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

4. Positionnement absolu et 0 Compatible avec IE8+, Firefox et Google Le contenu doit avoir une largeur et une hauteur.

5. Positionnement absolu et transformation

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

Cette méthode

n'est pas compatible avec IE8, mais est compatible avec IE9+, Firefox et Google Peu importe que le contenu ait une largeur ou une hauteur.

6. affichage:flex et marge:auto 

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

le contenu a une largeur et une hauteur :

est non compatible IE8, IE9, le contenu n'a ni largeur ni hauteur : n'est pas compatible avec IE. La largeur et la hauteur sont compatibles avec Firefox et Google.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!