Maison >interface Web >tutoriel CSS >Quelles sont les méthodes de centrage vertical en CSS

Quelles sont les méthodes de centrage vertical en CSS

青灯夜游
青灯夜游original
2021-04-08 17:32:3627229parcourir

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.

Quelles sont les méthodes de centrage vertical en CSS

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:&#39;&#39;;
  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!

Déclaration:
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