Résumé : utilisez CSS pour définir l'élément au centre vertical

En tant qu'ingénieur de siège front-end, j'ai rencontré le centrage horizontal et vertical du CSS lors de la création de pages Web. Je pense que tout le monde a étudié ou écrit à ce sujet, en particulier le centrage vertical, qui est encore plus ennuyeux. L'article vous présente principalement les solutions d'utilisation de CSS pour définir le centrage vertical des éléments. Avec ces méthodes, vous n'aurez pas à vous en soucier. Les amis qui en ont besoin peuvent s'y référer.

Avant-propos

Le centrage vertical des éléments est également un problème que nous rencontrons souvent dans notre mise en page quotidienne de pages web principalement. Je vous le présente. Concernant la solution pour utiliser CSS pour définir le centrage vertical des éléments, l'article présente une variété de solutions à diverses situations. Je pense que cela sera utile aux amis qui rencontrent ce problème. , jetons un coup d'œil. Voir l'introduction détaillée.

Code HTML :

<p class="parent">
<p class="child">Text here</p>
</p>

Puisque vous avez défini le centrage vertical de l'élément enfant, vous devez connaître la hauteur de l'élément parent, ce n'est qu'alors que vous pourrez savoir où se trouve ce qu'on appelle le centre, n'est-ce pas ? Tout comme si vous voulez vous tenir au milieu d'une distance, vous devez d'abord savoir quelle est la longueur de la distance, puis vous pouvez savoir où se trouve le milieu.
Faites attention, tous les pourcentages de hauteur et de largeur sont basés sur des paramètres tels que html,body {width: 100%;height: 100%;} Si vous ne le définissez pas comme ceci, l'élément parent de p.parent est body, et vous ne le faites pas. Si vous ne définissez pas la largeur et la hauteur du corps, vous ne pouvez pas voir l'effet. Le rapport hauteur/largeur de .parent p est relatif à son élément parent, vous devez donc vous assurer de la largeur et de la hauteur de l'élément parent de . parent p sont définis lors de son utilisation

(1) Le texte en ligne est centré verticalement

code CSS :

.parent {
    height: 100px;
    border: 1px solid #ccc; /*设置border是为了方便查看效果*/
}
.child {
    line-height: 100px;
}

(2) Centrer verticalement le non-texte dans la ligne (prendre img comme exemple)

code html :

<p class="parent">
    <img src="image.png" alt="" />
</p>

code css

.parent {
    height: 100px;
    border: 1px solid #ccc; /*设置border是为了方便查看效果*/
}
.parent img {
    //注意此时应该保证图片自身的高度或者你设置的高度小于父元素的200px的行高,不然你看不出来居中的效果.
    line-height: 100px;
}

(3) Les éléments au niveau du bloc de hauteur inconnue sont centrés verticalement

code html :

<p class="parent">
  <p class="child">
    <!--.child的高度未知,父元素要有高度-->
    sddvsds dfvsdvds
  </p>
</p>

Première méthode (aucun remplissage requis) :

code CSS :

.parent {
  width: 100%;
  height: 100%;
  position: relative;
  /*display: table;*/
}
.child {
  width: 500px;
  border: 1px solid #ccc; /*设置border是为了方便查看效果*/
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Deuxième méthode (sans transformation) :

Code CSS :

.parent {
    position: relative;
    width: 100%;
    height: 100%;
}
.child {
  width: 500px;
  border: 1px solid #ccc;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30%;
  margin: auto;
}

La troisième méthode (nécessite padding):

code css:

#parent {
  padding: 5% 0;
}
#child {
  padding: 10% 0;
}

Quatrième méthode:

(utilisez display: table, cette méthode convient également pour centrer des éléments de texte en ligne) :

code css :

.parent {
  width: 100%;
  height: 100%;
  display: table;
}
.child {
  display: table-cell;
  vertical-align: middle;
}

La cinquième méthode (mise en page Flex, la compatibilité doit être prise en compte ici !)

code CSS :

.parent {
    width: 100%;
    height: 100%; /*这里一定要写高度奥!*/
    display: flex;
    align-items: center;
    justify-content: center;
  }

(4) Les éléments au niveau du bloc dont les hauteurs sont connues sont centrés verticalement

code html :

<p class="parent">
  <p class="child">
    <!--.child的高度已知,父元素高度已知-->
    sddvsds dfvsdvds
  </p>
</p>

code CSS :

#parent {
  height: 300px;
}
#child {
  height: 40px;
  margin-top: 130px; /*这个只为父元素的高度减去这个元素的高度除以二计算得到的*/
  border: 1px solid #ccc;
}

Voici quelques-unes des méthodes réalisables que j'ai découvertes et personnellement testées. Il devrait y en avoir d'autres. méthodes

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!