Wie kann man einen Container mithilfe von Bootstrap und anderen Methoden vertikal zentrieren?

Wie zentriere ich einen Container in Bootstrap vertikal?

Vertikale Ausrichtung mit flexibler Box

Das flexible Box-Layout bietet eine unkomplizierte Lösung für die vertikale Ausrichtung. Es wird von modernen Webbrowsern weitgehend unterstützt, mit Ausnahme von Internet Explorer 8 und 9.

Erstellen Sie eine Klasse mit dem Namen .vertical-center und fügen Sie sie dem .jumbotron-Div hinzu.

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

Traditionell Methode für ältere Webbrowser

Für ältere Browser wie Internet Explorer 8 und 9 können wir Pseudoelemente und Vertikale verwenden Ausrichtung.

.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;
}

Überlegungen

• Inline-Elemente werden vertikal an der Grundlinie des übergeordneten Elements plus der halben x-Höhe des übergeordneten Elements ausgerichtet.
• Um eine Inline zu zentrieren Element vertikal, seine Höhe muss so eingestellt werden, dass sie mit der Höhe des übergeordneten Elements übereinstimmt.
• Pseudoelemente können verwendet werden, um ein zu erstellen Inline-Blockelement in voller Höhe, um eine vertikale Ausrichtung zu erreichen.
• Schrifteigenschaften zurücksetzen, um Lücken zwischen Inline-Elementen zu vermeiden.
• Berücksichtigen Sie die Positionierung und den Z-Index für Elemente rund um den Container, um eine ordnungsgemäße Anordnung zu gewährleisten.

Das obige ist der detaillierte Inhalt vonWie kann man einen Container mithilfe von Bootstrap und anderen Methoden vertikal zentrieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!