Maison > Article > interface Web > Élément CSS centré verticalement

Élément CSS centré verticalement

autoloadoriginal: 2021-04-06 16:04:031710parcourir

Le problème gênant avec CSS est le centrage vertical. Il existe plusieurs façons d'obtenir un centrage vertical, mais chaque méthode présente certaines limites, de sorte que le centrage vertical peut être utilisé en fonction de scénarios commerciaux réels.

1. Le contenu du conteneur ne contient qu'une seule ligne de texte

<!DOCTYPE html>
<html>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    div {
      height: 60px;
      background-color: #1888fa;
      color: white;
    }
    span {
      line-height: 60px;/* 设置一个大的行高，让它等于理想的容器高度。
      这样会让容器高度扩展到能够容纳行高。如果内容不是行内元素，可以设置为inline-block。 */
    }
  </style>
  <body>
    <div>
      <span>测试</span>
    </div>
  </body>
</html>

2. Le conteneur a une hauteur naturelle

La méthode de centrage vertical la plus simple en CSS consiste à donner au conteneur un remplissage supérieur et inférieur égal, permettant au conteneur et au contenu de déterminer leur propre hauteur. Regardez l'exemple ci-dessous, qui centre verticalement le contenu dans le conteneur parent en définissant padding-top et padding-bottom sur des valeurs égales.

<!DOCTYPE html>
<html>
   <style>
      * {
        padding: 0;
        margin: 0;
      }
      div {
        padding-top: 20px;  
        padding-bottom: 20px;
        background-color: #1888FA;
        color: white;
      }
    </style>
    <body>
      <div>
         <span>测试</span>
      </div>
    </body>
</html>

3. Utilisez FlexBox

<!DOCTYPE html>
<html>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    div {
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #1888fa;
      color: white;
    }
  </style>
  <body>
    <div>
      <span>测试</span>
    </div>
  </body>
</html>

Recommandé : "Résumé des questions d'entretien CSS en 2021 (dernière) 》

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

Article précédent：Que signifie l'inclinaison en CSSArticle suivant：Que signifie l'inclinaison en CSS

Articles Liés

Voir plus