Comment centrer verticalement un conteneur à l'aide de Bootstrap et d'autres méthodes ?

Comment centrer verticalement un conteneur dans Bootstrap ?

Alignement vertical avec une boîte flexible

La disposition de la boîte flexible offre une solution simple pour l'alignement vertical. Il est largement pris en charge par les navigateurs Web modernes, à l'exception d'Internet Explorer 8 et 9.

Créez une classe appelée .vertical-center et ajoutez-la au div .jumbotron.

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

Traditionnel Méthode pour les navigateurs Web hérités

Pour les navigateurs hérités comme Internet Explorer 8 et 9, nous pouvons utiliser des pseudo-éléments et des éléments verticaux alignement.

.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

• Les éléments en ligne sont alignés verticalement sur la ligne de base du parent plus la moitié de la hauteur x du parent.
• Pour centrer un élément en ligne élément verticalement, sa hauteur doit être réglée pour correspondre à la taille du parent.
• Des pseudo-éléments peuvent être utilisés pour créer un élément de bloc en ligne pleine hauteur afin d'obtenir un alignement vertical.
• Réinitialisez les propriétés de la police pour éviter les espaces entre les éléments en ligne.
• Pensez au positionnement et à l'index z des éléments autour du conteneur pour un arrangement correct. .

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!