Quelles sont les méthodes de centrage vertical en CSS

Méthode : 1. Utilisez le style "display:table-cell;vertical-align:middle;" ; 2. Utilisez la disposition flexible ; 3. Utilisez le positionnement absolu et les marges négatives ; Attributs ; 5. Utilisez un positionnement absolu et des attributs tels que haut et gauche.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.

Le centrage vertical est l'un des effets les plus courants dans la mise en page. Afin d'obtenir une bonne compatibilité, la méthode permettant d'obtenir un centrage vertical côté PC passe généralement par le positionnement absolu, la cellule de tableau, les marges négatives et d'autres méthodes. . Avec CSS3, le centrage vertical pour les terminaux mobiles est plus diversifié.

Méthode 1 : table-cellule

structure html :

<div class="box box1">
        <span>垂直居中</span>
</div>

css :

.box1{
	display: table-cell;
	vertical-align: middle;
	text-align: center;			
}

Méthode 2 : display:flex

.box2{
	display: flex;
	justify-content:center;
	align-items:Center;
}

Méthode 3 : Positionnement absolu et marges négatives

.box3{position:relative;}
.box3 span{
            position: absolute;
            width:100px;
            height: 50px;
            top:50%;
            left:50%;
            margin-left:-50px;
            margin-top:-25px;
            text-align: center;
        }

Méthode 4 : Positionnement absolu et 0

.box4 span{
  width: 50%;  
  height: 50%;  
  background: #000;
  overflow: auto;  
  margin: auto;  
  position: absolute;  
  top: 0; 
  left: 0; 
  bottom: 0; 
  right: 0;  
}

Cette méthode est quelque peu similaire à la précédente, mais ici, le centrage est obtenu en définissant margin:auto et top, left, right et bottom sur 0. C'est incroyable. Cependant, vous devez ici déterminer la hauteur des éléments internes. Vous pouvez utiliser des pourcentages, ce qui est plus adapté aux terminaux mobiles.

Méthode 5 : traduire

.box6 span{
			position: absolute;
			top:50%;
			left:50%;
			width:100%;
			transform:translate(-50%,-50%);
			text-align: center;
		}

Il s'agit en fait d'une variante de la méthode 3, et le changement est obtenu grâce à la traduction.

Méthode 6 : display:inline-block

.box7{
  text-align:center; 
  font-size:0;
}
.box7 span{
  vertical-align:middle; 
  display:inline-block; 
  font-size:16px;
}
.box7:after{
  content:'';
  width:0;
  height:100%;
  display:inline-block;
  vertical-align:middle;
}

Cette méthode est vraiment astucieuse... Utilisez :after pour occuper l'espace.

(Partage de vidéos d'apprentissage : tutoriel vidéo CSS)

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!