Comment centrer verticalement un conteneur dans Bootstrap à l'aide de Flexbox et des méthodes traditionnelles ?

Comment centrer verticalement un conteneur dans Bootstrap ?

Lorsque vous travaillez avec Bootstrap, il est courant de rencontrer le besoin d'un alignement vertical, en particulier au sein du composant Jumbotron. Cet article examine deux approches pour y parvenir en utilisant la boîte flexible et les méthodes traditionnelles.

L'approche de la boîte flexible

Avec l'avènement de la disposition de la boîte flexible, l'alignement vertical est devenu considérablement simplifié. Cette méthode exploite la propriété display: flex et la propriété align-items définie sur center.

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

L'approche traditionnelle pour les navigateurs hérités

Pour la compatibilité Internet Explorer 8 et 9, une approche traditionnelle l'utilisation de pseudo-éléments et d'éléments de blocs en ligne est recommandée. Cette méthode consiste à créer un pseudo-élément avec une hauteur totale, à définir son alignement vertical au milieu et à définir l'affichage du pseudo-élément et de l'élément conteneur sur inline-block.

.vertical-center {
  height: 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;
}

Supplémentaire Considérations

• Pour éviter les problèmes d'alignement vertical sur les très petits écrans, la hauteur des pseudo-éléments peut être définie sur auto ou 0 à l'aide du média CSS requêtes.
• Pour garantir que les sections de pied de page/en-tête restent visibles et au-dessus des autres éléments, envisagez d'utiliser un positionnement approprié et une valeur d'index z plus élevée.

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!