Wie zentriere ich einen Container in Bootstrap mithilfe von Flexbox und herkömmlichen Methoden vertikal?

Wie zentriere ich einen Container in Bootstrap vertikal?

Bei der Arbeit mit Bootstrap kommt es häufig vor, dass eine vertikale Ausrichtung erforderlich ist, insbesondere innerhalb der Jumbotron-Komponente. Dieser Artikel befasst sich mit zwei Ansätzen, um dies mithilfe der flexiblen Box und traditioneller Methoden zu erreichen.

Der flexible Box-Ansatz

Mit der Einführung des flexiblen Box-Layouts wurde die vertikale Ausrichtung erheblich vereinfacht. Diese Methode nutzt die display:flex-Eigenschaft und die auf „center“ gesetzte align-items-Eigenschaft.

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

Der traditionelle Ansatz für ältere Browser

Für die Kompatibilität mit Internet Explorer 8 und 9 ein traditioneller Ansatz Es wird empfohlen, Pseudoelemente und Inline-Block-Elemente zu verwenden. Bei dieser Methode wird ein Pseudoelement mit voller Höhe erstellt, dessen vertikale Ausrichtung auf „Mitte“ gesetzt und die Anzeige sowohl des Pseudoelements als auch des Containerelements auf „Inline-Block“ eingestellt.

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

Zusätzlich Überlegungen

• Um vertikale Ausrichtungsprobleme auf besonders kleinen Bildschirmen zu vermeiden, kann die Höhe von Pseudoelementen mithilfe von CSS-Medien auf „Auto“ oder „0“ eingestellt werden Abfragen.
• Um sicherzustellen, dass Fuß-/Kopfzeilenabschnitte sichtbar und über anderen Elementen bleiben, sollten Sie die richtige Positionierung und einen höheren Z-Indexwert in Betracht ziehen.

Das obige ist der detaillierte Inhalt vonWie zentriere ich einen Container in Bootstrap mithilfe von Flexbox und herkömmlichen Methoden vertikal?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!