Comment centrer verticalement un conteneur dans Bootstrap : Flexbox vs pseudo-élément ?

Comment centrer verticalement un conteneur dans Bootstrap

Utilisation de la disposition de boîte flexible (méthode moderne)

Pour les navigateurs modernes, vous pouvez centrer verticalement un conteneur à l'aide de la flexbox mise en page :

<div class="jumbotron vertical-center">
  <div class="container">
    ...
  </div>
</div>

.vertical-center {
  min-height: 100vh;
  display: flex;
  align-items: center;
}

Utilisation de ::before Pseudo-Element (ancienne méthode)

Pour les navigateurs plus anciens, vous pouvez utiliser un ::before pseudo- élément pour créer un élément pleine hauteur qui alignera le conteneur verticalement :

<div class="jumbotron vertical-center">
  <div class="container">
    ...
  </div>
</div>

.vertical-center {
  height: 100%;
  width: 100%;
  text-align: center;
  font: 0/0 a;
}

.vertical-center:before {
  content: " ";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.vertical-center > .container {
  max-width: 100%;
  display: inline-block;
  vertical-align: middle;
  font: 16px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
}

Considérations supplémentaires

• Pour éviter des problèmes inattendus sur les petits écrans, vous pouvez réinitialiser la hauteur du pseudo ::before -element sur auto ou 0.
• S'il y a des sections de pied de page/en-tête autour du conteneur, positionnez-les correctement et ajoutez un élément plus haut Valeur z-index pour les garder au top.

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!