4 méthodes CSS couramment utilisées pour réaliser un centrage vertical

Cette fois, je vais vous présenter 4 méthodes couramment utilisées pour réaliser un centrage vertical avec CSS Quelles sont les précautions pour mettre en œuvre un centrage vertical avec CSS Voici des cas pratiques, jetons un coup d'oeil.

Line-heightline-heightRéaliser le centrage vertical d'une seule ligne de texte

On y a toujours pensé que le centrage vertical d'une seule ligne de texte nécessite de définir la même valeur que la hauteur de la ligne, mais il n'est 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>测试文字</p>

Paramètresalignement vertical : le milieu réalise le 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, ses éléments enfants peut être uniforme. Réaliser un centrage vertical. 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

to table-cell ne peut pas utiliser le positionnement flottant ou absolu

, car le positionnement flottant ou absolu donnera à l'élément des caractéristiques d'élément de niveau bloc, perdant ainsi la fonction d'alignement vertical de l'élément table-cell. 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>
    </p><p>我是有点长的有点长的有点长的有点长的测试文字</p>   

[2] Si l'élément enfant est une image, définissez la hauteur de ligne de l'élément parent au lieu de la hauteur et définissez la police- taille de l'élément parent à 0 .

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>
  <img  class="child lazy" src="/static/imghw/default1.png" data-src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/img1.gif" alt="4 méthodes CSS couramment utilisées pour réaliser un centrage vertical" >  
</p>

【3】Obtenez un effet de centrage vertical en ajoutant de nouveaux éléments

Définissez la hauteur du nouvel élément en tant que parent La hauteur du niveau, la largeur sont 0 et l'élément vertical-align:middle inline-block centré verticalement est également défini. 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>
  </p><p>我是比较长的比较长的多行文字</p>
  <i></i> 

Idée 3 : Centrage vertical par positionnement absolu

[1] Si l'élément enfant n'a pas de position fixe hauteur, utilisez top50% Combiné avec translationY(-50%), l'effet de centrage peut être obtenu.

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 le 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 : une valeur de hauteur négative.

<style>
.parent{
  position:relative;
}
.child{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
</style>
<p>
  </p><p>测试文字</p>

[2] Si la hauteur de l'élément enfant est fixe, combinez l'attribut de modèle de boîte de positionnement absolu pour obtenir l'effet de centrage

< ;À propos de l'augmentation du niveau p Description>

<style>
.parent{
  position: relative;
}
.child{
 position: absolute;
 top: 0;
 bottom: 0;
 margin: auto 0;
 height: 50px;
}
</style>
<p>
  </p><p>测试文字</p>

Dans l'alignement horizontal au centre, placez une couche de p sur la couche externe de l'élément et définissez l'absolu, et définissez l'attribut marge négative gauche ou relative négative gauche de l'élément pour obtenir l'effet de centrage horizontal. Mais comme la marge est relative à la largeur du bloc conteneur, margin-top:-50% obtient la largeur au lieu de -50% de la hauteur, ce n'est donc pas réalisable pour la valeur relative en pourcentage, la hauteur du bloc conteneur ; is auto Dans ce cas, les navigateurs Chrome, Safari et IE8+ ne prennent pas en charge la définition du pourcentage de valeur supérieure de l'élément, ce n'est donc pas réalisable.

Idée 4 : Utiliser le modèle de boîte flexibleflex pour obtenir un centrage vertical

[注意] IE9-浏览器不支持

【1】在伸缩容器上设置侧轴对齐方式align-items: center

<style>
.parent{
  display: flex;
  align-items: center;
}
</style>
<p>
    </p><p>测试文字</p>   

【2】在伸缩项目上设置margin: auto 0

<style>
.parent{
  display: flex;
}
.child{
  margin: auto 0;
}
</style>
<p>
    </p><p>测试文字</p>   

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

css3的pointer-events使用详解

focus-within的使用详解

CSS3做出无缝轮播广告

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!