Résumer les nouvelles fonctionnalités de CSS3 pour résumer les méthodes d'implémentation du centrage vertical.

Des fonctionnalités telles que la disposition flex et le pseudo-élément avant dans CSS3 sont vraiment pratiques et élégantes pour implémenter le centrage vertical. Nous allons résumer ici les nouvelles fonctionnalités de CSS3 et résumer les méthodes d'implémentation du centrage vertical :

<.>0. Centrage du contenu d'une seule ligne
Il est plus simple de ne considérer qu'une seule ligne, que le conteneur ait ou non une hauteur fixe, définissez simplement la hauteur de ligne et la hauteur du conteneur, créez les deux. valeurs ​​​​égales, et ajoutez Utilisez simplement le débordement : caché

.middle-demo-1{   
height: 4em;   
line-height: 4em;   
overflow: hidden;   
}

Avantages :

(1) Prend en charge les éléments au niveau du bloc et en ligne
(2). tous les navigateurs
Inconvénients :
(1). Une seule ligne peut être affichée
(2) IE ne prend pas en charge les
centrés tels que . > (1). Utilisez la définition de hauteur relative. Votre hauteur et votre hauteur de ligne
(2) Si vous ne voulez pas gâcher votre mise en page, overflow : caché doit être
pourquoi ?
Veuillez comparer les deux exemples suivants :

<p style="background: #900; color: #00f; font: bold 12px/24px Helvertica,Arial,sans-serif; height:24px; width:370px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<br/>
<br/>
<p style="background: #090; color: #00f; font: bold 12px/2em Helvertica,Arial,sans-serif; height:2em; width:370px; overflow: hidden;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

La hauteur précédente est dans l'unité absolue de px, et il n'y a pas de débordement caché. L'unité du. la hauteur suivante est Les unités relatives sont em et le débordement est masqué. Si votre navigateur prend en charge l’agrandissement des polices, allez-y et voyez ce qui se passe.

1. Utilisez position:absolute (fixed) pour définir les propriétés de left, top, margin-left et margin-top ; >

2. Utilisez l'attribut position:fixed (absolute) . N'oubliez pas margin:auto

.box{   
    position:absolute;/*或fixed*/
    top:50%;   
    left:50%;   
    margin-top:-100px;   
    margin-left:-200px;   
}

3. attribut de cellule. Le contenu est centré verticalement ;

.box{   
    position: absolute;或fixed
    top:0;   
    rightright:0;   
    bottombottom:0;   
    left:0;   
    margin: auto;   
}

4. attribut de css3;

.box{   

display:table-cell;   

vertical-align:middle;   

text-align:center;   

width:120px;   

height:120px;   

background:purple;   

}

5. Le plus avancé, utilisez : avant l'élément ; 🎜>

.box{   
    position: absolute;   
    transform: translate(50%,50%);   
    -webkit-transform:translate(50%,50%);   
    -moz-transform:translate(50%,50%);   
    -ms-transform:translate(50%,50%);   
}

6.Mise en page flexible ;

.box{   

position:fixed;   

display:block;   

background:rgba(0,0,0,.5);   

}   

.box:before{   

content:'';   

display:inline-block;   

vertical-align:middle;   

height:100%;   

}   

.box.content{   

width:60px;   

height:60px;   

line-height:60px;   

color:red;

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!