Élément CSS centré verticalement-tutoriel CSS-php.cn

Élément CSS centré verticalement

autoload

Libérer： 2021-04-15 13:59:41

original

1752 Les gens l'ont consulté

Élément CSS centré verticalement

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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!