Maison > interface Web > tutoriel CSS > le corps du texte

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

青灯夜游
Libérer: 2018-10-25 15:01:35
avant
2092 Les gens l'ont consulté

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>
Copier après la connexion

structure de style CSS par défaut

.box{
    width:200px;
    height:200px;
    background-color:green;   
}
.content{
    background-color:yellow;   
}
Copier après la connexion

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;   //上下居中        
}
Copier après la connexion

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;      //上下居中
}
Copier après la connexion

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;
}
Copier après la connexion

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;
}
Copier après la connexion
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%);
}
Copier après la connexion

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!

Étiquettes associées:
source:cnblogs.com
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal