Code d'implémentation du centrage vertical CSS

Cet article partage principalement avec vous le code d'implémentation du centrage vertical CSS. J'espère que ce code CSS pourra aider tout le monde.

1. S'il s'agit d'une seule ligne de texte, la valeur de line-height est égale à height

Le cas est le suivant :

.verticle{    height: 100px;    line-height: 100px;}

2. Pour les éléments dont la largeur et la hauteur sont connues, utilisez Le cas de positionnement absolu

est le suivant :

.container {  position: relative; 
}.vertical {  width : 300px; /*子元素的宽度*/
  height: 300px;  /*子元素高度*/
  position: absolute;  top:50%;  /*父元素高度50%*/
  left: 50%; 
  margin-left: -150px;  margin-top: -150px; /*自身高度一半*/}

3. Les éléments dont la largeur et la hauteur sont inconnues sont pivotés à l'aide de CSS3

. Le cas est le suivant :

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

4. Le modèle de boîte flexible de CSS3

Le cas est le suivant :

.content{     display:flex;     justify-content: center; /*子元素水平居中*/
     align-items: center; /*子元素垂直居中*/}

5. , l'inconvénient est que IE6,7 n'est pas compatible

Le cas est le suivant :

.container {      display: table;}.content {      display: table-cell;      vertical-align: middle; }

Recommandations associées :

6 CSS horizontal et solutions de centrage vertical

4 implémentations de la méthode de centrage horizontal et vertical CSS

Comment centrer verticalement img et span dans div

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!