CSS quatre méthodes pour réaliser un centrage vertical

Cet article triera quatre types de CSS pour vous permettre d'obtenir l'effet de centrage vertical. L'idée est claire et très bonne, et elle a une valeur de référence. Les amis qui en ont besoin peuvent s'y référer

line-height Pour réaliser le centrage vertical d'une seule ligne de texte

Je pensais que le centrage vertical d'une seule ligne de texte nécessitait de régler la hauteur et la ligne height à la même valeur, mais il n'est en fait pas nécessaire de définir la hauteur. En fait, le texte lui-même apparaît centré sur une ligne. Sans définir de hauteur, la hauteur de ligne augmente la hauteur.

<style>
.test{
    line-height: 50px;
    background-color: lightblue;
}    
</style>
<p class="test">测试文字</p>

Définissez vertical-align:middle pour obtenir un centrage vertical

【1】Définissez l'affichage de l'élément parent sur table-cell

En définissant vertical-align:middle pour l'élément table-cell , vous pouvez le faire. Tous les éléments enfants sont centrés verticalement. Ceci est similaire au centrage vertical des cellules dans les tableaux

[Remarque] Si le navigateur IE7 le prend en charge, vous pouvez le modifier en

Si un traitement de positionnement flottant ou absolu est requis, une autre couche de p doit être placée à l'extérieur.

<style>
.parent{
  display: table-cell;
  vertical-align: middle;
}
</style>
<p class="parent" style="background-color: gray;height: 100px;">
    <p class="child" style="background-color: lightblue;">我是有点长的有点长的有点长的有点长的测试文字</p>   
</p>

alignement vertical : L'explication du milieu est que le milieu de l'élément est aligné avec la ligne de base de l'élément parent plus la moitié de la hauteur de la lettre X dans l'élément parent. Parce que le caractère X n'est pas centré verticalement dans la zone em et que les positions haute et basse du caractère X dans chaque police sont incohérentes.

Ainsi, lorsque la taille de la police est plus grande, la différence est plus évidente. Lorsque la taille de la police est 0, cela équivaut à définir la taille de la police du caractère X sur 0, ce qui permet d'obtenir un centrage vertical complet.

<style>
.parent{
  line-height: 100px;
  font-size: 0;
}
.child{
  vertical-align: middle;
}
</style>
<p class="parent" style="background-color: lightgray;width:200px;">
  <img class="child" src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/img1.gif" width="50%" alt="test">  
</p>

Définissez la hauteur du nouvel élément sur la hauteur du parent, la largeur sur 0, et définissez également l'élément de bloc en ligne centré verticalement de vertical-align:middle. Puisque l'espace entre les deux éléments est analysé, vous devez définir font-size:0 au niveau parent, puis définir font-size sur la valeur requise au niveau enfant, si les exigences structurelles ne sont pas strictes, vous pouvez afficher ; les deux éléments sur une seule ligne, il n'est alors pas nécessaire de définir font-size:0.

<style>
.parent{
  height: 100px;
  font-size: 0;
}
.child{
  display: inline-block;
  font-size: 20px;
  vertical-align: middle;
}
.childSbling{
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
</style>
<p class="parent" style="background-color: lightgray; width:200px;">
  <p class="child" style="background-color: lightblue;">我是比较长的比较长的多行文字</p>
  <i class="childSbling"></i> 
</p>

Idée 3 : Centrage vertical par positionnement absolu

Le pourcentage de la fonction de traduction est relatif à sa propre hauteur, donc top:50% combiné avec traduireY(-50%) peut obtenir l'effet de centrage.

[Note] Le navigateur IE9 ne prend pas en charge

[Note] Si la hauteur de l'élément enfant est connue, la fonction translation() peut également être remplacée par margin-top : a valeur de hauteur négative.

<style>
.parent{
  position:relative;
}
.child{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
</style>
<p class="parent" style="background-color: lightgray; height:100px;">
  <p class="child" style="background-color: lightblue;">测试文字</p>
</p>

<style>
.parent{
  position: relative;
}
.child{
 position: absolute;
 top: 0;
 bottom: 0;
 margin: auto 0;
 height: 50px;
}
</style>
<p class="parent" style="background-color: lightgray; height:100px;">
  <p class="child" style="background-color: lightblue;">测试文字</p>
</p>

<style>
.parent{
  display: flex;
  align-items: center;
}
</style>
<p class="parent" style="background-color: gray; height: 100px;">
    <p class="child" style="background-color: lightblue;">测试文字</p>   
</p>